<select>ඩ්‍රොප් ඩවුන් විලාසිතාවක් සඳහා CSS පමණක් ක්‍රමයක් තිබේද?

<select>කිසිදු ජාවාස්ක්‍රිප්ට් එකක් නොමැතිව මට හැකි තරම් මානුෂීය ආකාරයක් මෝස්තර කිරීමට අවශ්‍යයි . CSS හි මට එසේ කිරීමට භාවිතා කළ හැකි ගුණාංග මොනවාද?

මෙම කේතය සියලුම ප්‍රධාන බ්‍රව්සර් සමඟ අනුකූල විය යුතුය:

• ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 6, 7 සහ 8
• ෆයර්ෆොක්ස්
• සෆාරි

මට එය ජාවාස්ක්‍රිප්ට් සමඟ කළ හැකි බව මම දනිමි: උදාහරණය .

මම සරල මෝස්තර ගැන කතා නොකරමි. මට දැන ගැනීමට අවශ්‍යයි, අපට කළ හැකි හොඳම දේ CSS වලින් පමණි.

Stack Overflow හි මට සමාන ප්‍රශ්න හමු විය.

හා මේ එක Doctype.com මත.

මෙන්න විසඳුම් තුනක්:

විසඳුම # 1 - පෙනුම: කිසිවක් නැත - ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 - 11 සමඟ වැඩ කිරීම ( ආදර්ශනය )

-

appearance: noneතෝරාගත් අංගයේ පෙරනිමි ඊතලය සැඟවීමට , ඉන්පසු ඔබේ අභිරුචි ඊතලය එක් කරන්නbackground-image

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;       /* Remove default arrow */
   background-image: url(...);   /* Add custom arrow */
}

බ්‍රව්සර් සහාය:

appearance: noneඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 (සහ පසුව) සහ ෆයර්ෆොක්ස් 34 (සහ පසුව) හැර ඉතා හොඳ බ්‍රව්සර් සහාය ( කැනියස් ) ඇත.

අපට මෙම තාක්ෂණය වැඩිදියුණු කළ හැකි අතර එකතු කිරීමෙන් ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 සඳහා සහය එක් කළ හැකිය

select::-ms-expand {
    display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 සැලකිලිමත් වන්නේ නම්, අපට පෙරනිමි ඊතලය ඉවත් කිරීමට ක්‍රමයක් නොමැත (එයින් අදහස් කරන්නේ අපට දැන් ඊතල දෙකක් ඇති බවය), නමුත් අපට විනෝදජනක ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 තේරීම් යන්ත්‍රයක් භාවිතා කළ හැකිය.

අවම වශයෙන් අපගේ අභිරුචි ඊතලය අහෝසි කිරීමට - පෙරනිමිය තෝරා ඊතලය නොවෙනස්ව තබන්න.

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background-image:none\9;
        padding: 5px\9;
    }
}

සියල්ල එකට:

select {
  margin: 50px;
  width: 150px;
  padding: 5px 35px 5px 5px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}


/* CAUTION: Internet Explorer hackery ahead */


select::-ms-expand {
    display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}

/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
    select {
        background: none\9;
        padding: 5px\9;
    }
}

<select>
  <option>Apples</option>
  <option selected>Pineapples</option>
  <option>Chocklate</option>
  <option>Pancakes</option>
</select>

මෙම විසඳුම පහසු වන අතර හොඳ බ්‍රව්සර් සහාය ඇත - එය සාමාන්‍යයෙන් ප්‍රමාණවත් විය යුතුය.

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 9 (සහ පසුව) සහ ෆයර්ෆොක්ස් 34 (සහ පසුව) සඳහා බ්‍රව්සර් සහාය අවශ්‍ය නම් දිගටම කියවන්න ...

විසඳුම # 2 පෙරනිමි ඊතලය සැඟවීමට තෝරාගත් අංගය කපා දමන්න ( ආදර්ශනය )

-

(වැඩි විස්තර මෙතැනින් කියවන්න)

මෙම ආවරණය කරනවා selectසහිත div මූලද්රව්යය ස්ථාවර පළල හා overflow:hidden.

ඉන්පසු selectමූලද්‍රව්‍යයට div ට වඩා පික්සල් 20 ක් පමණ පළලක් දෙන්න .

ප්‍රති result ලය වනුයේ selectමූලද්‍රව්‍යයේ පෙරනිමි පතන ඊතලය සැඟවී යනු ඇත ( overflow:hiddenකන්ටේනරය මත ඇති නිසා), ඔබට අවශ්‍ය ඕනෑම පසුබිම් රූපයක් දකුණු පසින් දකුණු පසින් තැබිය හැකිය.

මෙම ප්‍රවේශයේ ඇති වාසිය නම් එය හරස් බ්‍රව්සරය (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8 සහ පසුව වෙබ්කිට් සහ ගෙකෝ ) ය. කෙසේ වෙතත්, මෙම ප්‍රවේශයේ අවාසිය නම්, විකල්පයන් දකුණු පසින් පිටතට යාමයි (අප සැඟවූ පික්සල් 20 කින් ... විකල්ප මූලද්‍රව්‍ය තෝරාගත් මූලද්‍රව්‍යයේ පළල ගන්නා නිසා).

[කෙසේ වෙතත්, අභිරුචි තෝරාගත් අංගය ජංගම උපාංග සඳහා පමණක් අවශ්‍ය නම් - ඉහත ගැටළුව අදාළ නොවේ - සෑම දුරකථනයක්ම ස්වදේශීයව තෝරාගත් අංගය විවෘත කරන ආකාරය නිසා. එබැවින් ජංගම දුරකථන සඳහා මෙය හොඳම විසඳුම විය හැකිය.]

.styled select {
  background: transparent;
  width: 150px;
  font-size: 16px;
  border: 1px solid #CCC;
  height: 34px;
}
.styled {
  margin: 50px;
  width: 120px;
  height: 34px;
  border: 1px solid #111;
  border-radius: 3px;
  overflow: hidden;
  background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}

<div class="styled">
  <select>
    <option>Pineapples</option>
    <option selected>Apples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
</div>

ෆයර්ෆොක්ස් හි අභිරුචි ඊතලය අවශ්‍ය නම් - 35 වන සංස්කරණයට පෙර - නමුත් ඔබට ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් හි පැරණි අනුවාදයන්ට සහාය වීමට අවශ්‍ය නොවේ නම් - දිගටම කියවන්න ...

විසඳුම # 3 - pointer-eventsදේපල භාවිතා කරන්න ( නිරූපණය )

-

(වැඩි විස්තර මෙතැනින් කියවන්න)

මෙහි අදහස වන්නේ ස්වදේශීය ඩ්‍රොප් ඩවුන් ඊතලය හරහා මූලද්‍රව්‍යයක් ආවරණය කිරීම (අපගේ අභිරුචි එකක් නිර්මාණය කිරීම සඳහා) ඉන්පසු එය මත දර්ශක සිදුවීම් තහනම් කිරීමයි.

වාසිය: එය වෙබ්කිට් සහ හූනන් වල හොඳින් ක්‍රියාත්මක වේ. එය ද හොඳ පෙනුමක් ඇත ( optionමූලද්රව්ය ඉවත් කිරීම නැත ).

අවාසිය: ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් (ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 සහ පහළ) සහාය නොදක්වයි pointer-events, එයින් අදහස් කරන්නේ ඔබට අභිරුචි ඊතලය ක්ලික් කළ නොහැකි බවයි. එසේම, මෙම ක්‍රමයේ ඇති තවත් (පැහැදිලිව පෙනෙන) අවාසියක් නම්, ඔබේ නව ඊතල රූපය හෝවර් ආචරණයකින් හෝ අත් කර්සරයකින් ඉලක්ක කළ නොහැකි වීමයි.

කෙසේ වෙතත්, මෙම ක්‍රමය සමඟ ඔබට ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් ඊතලයෙන් සාදන ලද ප්‍රමිතියට ආපසු හැරවීමට නවීනකරණය හෝ කොන්දේසි සහිත අදහස් භාවිතා කළ හැකිය.

සැ.යු: ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 conditional commentsතවදුරටත් සහාය නොදක්වයි : ඔබට මෙම ප්‍රවේශය භාවිතා කිරීමට අවශ්‍ය නම්, ඔබ බොහෝ විට නූතනයිසර් භාවිතා කළ යුතුය . කෙසේ වෙතත්, මෙහි විස්තර කර ඇති CSS හැක් සමඟ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 වෙතින් දර්ශක සිදුවීම් CSS බැහැර කළ හැකිය .

.notIE {
  position: relative;
  display: inline-block;
}
select {
  display: inline-block;
  height: 30px;
  width: 150px;
  outline: none;
  color: #74646E;
  border: 1px solid #C8BFC4;
  border-radius: 4px;
  box-shadow: inset 1px 1px 2px #DDD8DC;
  background: #FFF;
}
/* Select arrow styling */

.notIE .fancyArrow {
  width: 23px;
  height: 28px;
  position: absolute;
  display: inline-block;
  top: 1px;
  right: 3px;
  background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
  pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/

@media screen and (min-width: 0\0) {
  .notIE .fancyArrow {
    display: none;
  }
}

<!--[if !IE]> -->
<div class="notIE">
  <!-- <![endif]-->
  <span class="fancyArrow"></span>
  <select>
    <option>Apples</option>
    <option selected>Pineapples</option>
    <option>Chocklate</option>
    <option>Pancakes</option>
  </select>
  <!--[if !IE]> -->
</div>
<!-- <![endif]-->

එය කළ හැකි නමුත් අවාසනාවකට බොහෝ විට වෙබ්කිට් මත පදනම් වූ බ්‍රව්සර් තුළ සංවර්ධකයින් වශයෙන් අපට අවශ්‍ය ප්‍රමාණයට. බොහෝ නවීන බ්‍රව්සර්වල දැනට සහය දක්වන CSS ගුණාංග සමඟ ගැලපෙන පරිදි වැඩිදියුණු කරන ලද, සංවර්ධක මෙවලම් පරීක්ෂක හරහා ක්‍රෝම් විකල්ප පැනලයෙන් එකතු කරන ලද CSS මෝස්තරයේ උදාහරණය මෙන්න:

select {
    -webkit-appearance: button;
    -moz-appearance: button;
    -webkit-user-select: none;
    -moz-user-select: none;
    -webkit-padding-end: 20px;
    -moz-padding-end: 20px;
    -webkit-padding-start: 2px;
    -moz-padding-start: 2px;
    background-color: #F07575; /* Fallback color if gradients are not supported */
    background-image: url(../images/select-arrow.png), -webkit-linear-gradient(top, #E5E5E5, #F4F4F4); /* For Chrome and Safari */
    background-image: url(../images/select-arrow.png), -moz-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Firefox (3.6 to 15) */
    background-image: url(../images/select-arrow.png), -ms-linear-gradient(top, #E5E5E5, #F4F4F4); /* For pre-releases of Internet Explorer  10*/
    background-image: url(../images/select-arrow.png), -o-linear-gradient(top, #E5E5E5, #F4F4F4); /* For old Opera (11.1 to 12.0) */
    background-image: url(../images/select-arrow.png), linear-gradient(to bottom, #E5E5E5, #F4F4F4); /* Standard syntax; must be last */
    background-position: center right;
    background-repeat: no-repeat;
    border: 1px solid #AAA;
    border-radius: 2px;
    box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.1);
    color: #555;
    font-size: inherit;
    margin: 0;
    overflow: hidden;
    padding-top: 2px;
    padding-bottom: 2px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

ඔබ මෙම කේතය වෙබ්කිට් මත පදනම් වූ බ්‍රව්සරයක් තුළ ඕනෑම පිටුවක ධාවනය කරන විට එය තෝරාගත් කොටුවේ පෙනුම වෙනස් කළ යුතුය, සම්මත OS-ඊතලය ඉවත් කර PNG- ඊතලයක් එක් කළ යුතුය, ලේබලයට පෙර සහ පසු යම් පරතරයක් තබන්න, ඔබට අවශ්‍ය ඕනෑම දෙයක්.

වැදගත්ම කොටස appearanceදේපල වේ, එය මූලද්රව්යය හැසිරෙන ආකාරය වෙනස් කරයි.

ජංගම දුරකථන ඇතුළුව සියලුම වෙබ්කිට් මත පදනම් වූ බ්‍රව්සරයේ එය පරිපූර්ණව ක්‍රියා කරයි, නමුත් හූනා appearanceමෙන්ම වෙබ්කිට් සඳහා සහය නොදක්වයි .

මෙම තේරීම් අංගයක් සහ එහි මෙනුව ලක්ෂණය වේ ශෛලිය කිරීමට අපහසු.

ක්‍රිස් හයිල්මන් විසින් තෝරාගත් මූලද්‍රව්‍යය සඳහා වන ශෛලීය ගුණාංග මගින් පළමු පිළිතුරට අදහස් දක්වමින් රයන් ඩොහෙරි පැවසූ දේ සනාථ කරයි:

"තෝරාගත් අංගය මෙහෙයුම් පද්ධතියේ කොටසක් මිස බ්‍රව්සර් ක්‍රෝම් නොවේ. එබැවින් එය ශෛලියට ඉතා විශ්වාසදායක නොවේ. කෙසේ හෝ උත්සාහ කිරීම අර්ථවත් නොවේ."

මට මෙම නිශ්චිත ගැටළුව ඇති අතර, මට රූප භාවිතා කළ නොහැකි වූ අතර බ්‍රව්සර් ආධාරයෙන් සීමා නොවීය. මෙය spec පිරිවිතර මත විය යුතු අතර වාසනාව සමඟ අවසානයේ සෑම තැනකම වැඩ කිරීමට පටන් ගන්න .

ඩ්‍රොප් ඩවුන් ඊතලයක් «කැපීම» සඳහා එය ස්ථර කරකැවූ පසුබිම් ස්ථර භාවිතා කරයි, තෝරාගත් මූලද්‍රව්‍යය සඳහා ව්‍යාජ මූලද්‍රව්‍ය ක්‍රියා නොකරනු ඇත.

සංස්කරණය කරන්න: මෙම යාවත්කාලීන කළ අනුවාදයේ මම CSS විචල්‍යයන් සහ ඉතා කුඩා තේමා ක්‍රමයක් භාවිතා කරමි.

:root {
  --radius: 2px;
  --baseFg: dimgray;
  --baseBg: white;
  --accentFg: #006fc2;
  --accentBg: #bae1ff;
}

.theme-pink {
  --radius: 2em;
  --baseFg: #c70062;
  --baseBg: #ffe3f1;
  --accentFg: #c70062;
  --accentBg: #ffaad4;
}

.theme-construction {
  --radius: 0;
  --baseFg: white;
  --baseBg: black;
  --accentFg: black;
  --accentBg: orange;
}

select {
  font: 400 12px/1.3 sans-serif;
  -webkit-appearance: none;
  appearance: none;
  color: var(--baseFg);
  border: 1px solid var(--baseFg);
  line-height: 1;
  outline: 0;
  padding: 0.65em 2.5em 0.55em 0.75em;
  border-radius: var(--radius);
  background-color: var(--baseBg);
  background-image: linear-gradient(var(--baseFg), var(--baseFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentBg) 50%),
    linear-gradient(var(--accentBg) 42%, var(--accentFg) 42%);
  background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
  background-size: 1px 100%, 20px 22px, 20px 22px, 20px 100%;
  background-position: right 20px center, right bottom, right bottom, right bottom;   
}

select:hover {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
}

select:active {
  background-image: linear-gradient(var(--accentFg), var(--accentFg)),
    linear-gradient(-135deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(-225deg, transparent 50%, var(--accentFg) 50%),
    linear-gradient(var(--accentFg) 42%, var(--accentBg) 42%);
  color: var(--accentBg);
  border-color: var(--accentFg);
  background-color: var(--accentFg);
}

<select>
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-pink">
  <option>So many options</option>
  <option>...</option>
</select>

<select class="theme-construction">
  <option>So many options</option>
  <option>...</option>
</select>

තෝරාගත් ඩ්‍රොප් ඩවුන් මෝස්තර කිරීමේදී මා දුටු විශාලතම නොගැලපීම සෆාරි සහ ගූගල් ක්‍රෝම් විදැහුම්කරණයයි (ෆයර්ෆොක්ස් CSS හරහා සම්පූර්ණයෙන්ම වෙනස් කළ හැකිය). අන්තර්ජාලයේ අපැහැදිලි ගැඹුරක් සෙවීමෙන් පසුව, වෙබ්කිට් සමඟ මගේ අභිලාෂයන් මුළුමනින්ම පාහේ විසඳන පහත සඳහන් දෑ මට හමු විය:

සෆාරි සහ ගූගල් ක්‍රෝම් නිවැරදි කිරීම :

select {
  -webkit-appearance: none;
}

කෙසේ වෙතත්, මෙය පතන ඊතලය ඉවත් කරයි. ඔබට අසල ඇති ඩ්‍රොප් ඩවුන් ඊතලයක් එක් කළ හැකියdiv පසුබිමක්, negative ණ ආන්තිකයක් හෝ තෝරාගත් පතන මට්ටමට ඉහළින් ස්ථානගත .

* වැඩි විස්තර සහ වෙනත් විචල්‍යයන් CSS දේපලෙහි ඇත: -webkit-පෙනුම .

<select>බ්‍රව්සරයක විදහා දක්වන HTML පිටුවක ඇති වෙනත් ඕනෑම HTML අංගයක් මෙන් ටැග් CSS හරහා හැඩගස්වා ගත හැකිය. පහත දැක්වෙන්නේ (ඕනෑවට වඩා සරල) උදාහරණයකි, එය තෝරාගත් අංගයක් පිටුවේ ස්ථානගත කර විකල්පයන්ගේ පෙළ නිල් පැහැයෙන් දක්වනු ඇත.

උදාහරණ HTML ගොනුව (selectExample.html):

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
  <title>Select Styling</title>
  <link href="selectExample.css" rel="stylesheet">
</head>
<body>
<select id="styledSelect" class="blueText">
  <option value="apple">Apple</option>
  <option value="orange">Orange</option>
  <option value="cherry">Cherry</option>
</select>
</body>
</html>

උදාහරණ CSS ගොනුව (selectExample.css):

/* All select elements on page */
select {
  position: relative;
}

/* Style by class. Effects the text of the contained options. */
.blueText {
  color: #0000FF;
}

/* Style by id. Effects position of the select drop down. */
#styledSelect {
  left: 100px;
}

බ්ලොග් සටහන CSS පෝරමය ඩ්‍රොප් ඩවුන් ස්ටයිල් කරන්නේ කෙසේද ජාවාස්ක්‍රිප්ට් මා වෙනුවෙන් ක්‍රියා නොකරයි , නමුත් එය ඔපෙරා හි අසමත් වුවද:

select {
  border: 0 none;
  color: #FFFFFF;
  background: transparent;
  font-size: 20px;
  font-weight: bold;
  padding: 2px 10px;
  width: 378px;
  *width: 350px;
  *background: #58B14C;
}

#mainselection {
  overflow: hidden;
  width: 350px;
  -moz-border-radius: 9px 9px 9px 9px;
  -webkit-border-radius: 9px 9px 9px 9px;
  border-radius: 9px 9px 9px 9px;
  box-shadow: 1px 1px 11px #330033;
  background: url("arrow.gif") no-repeat scroll 319px 5px #58B14C;
}

<div id="mainselection">
  <select>
    <option>Select an Option</option>
    <option>Option 1</option>
    <option>Option 2</option>
  </select>
</div>

සියලුම නවීන බ්‍රව්සර් වල ක්‍රියාත්මක වන අනුවාදයක් මෙන්න. ප්රධාන දෙය නම් භාවිතා කිරීමයිappearance:none කරන්නේ පෙරනිමි හැඩතල ගැන්වීම ඉවත් කරයි. සියලුම හැඩතල ගැන්වීම් අහෝසි වී ඇති බැවින්, ආදානය වෙතින් තේරීම දෘශ්‍යමය වශයෙන් වෙනස් කරන ඊතලය තුළට ඔබ නැවත එකතු කළ යුතුය.

වැඩ කරන උදාහරණය: https://jsfiddle.net/gs2q1c7p/

select:not([multiple]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    background-position: right 50%;
    background-repeat: no-repeat;
    background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAMCAYAAABSgIzaAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyJpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBNYWNpbnRvc2giIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDZFNDEwNjlGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDZFNDEwNkFGNzFEMTFFMkJEQ0VDRTM1N0RCMzMyMkIiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo0NkU0MTA2N0Y3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0NkU0MTA2OEY3MUQxMUUyQkRDRUNFMzU3REIzMzIyQiIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PuGsgwQAAAA5SURBVHjaYvz//z8DOYCJgUxAf42MQIzTk0D/M+KzkRGPoQSdykiKJrBGpOhgJFYTWNEIiEeAAAMAzNENEOH+do8AAAAASUVORK5CYII=);
    padding: .5em;
    padding-right: 1.5em
}

#mySelect {
    border-radius: 0
}

<select id="mySelect">
    <option>Option 1</option>
    <option>Option 2</option>
</select>

මම ඔබේ නඩුවට පැමිණියේ බූට්ස්ට්‍රැප් භාවිතා කරමිනි . ක්‍රියාත්මක වන සරලම විසඳුම මෙයයි:

select.form-control {
    -moz-appearance: none;
    -webkit-appearance: none;
    appearance: none;
    background-position: right center;
    background-repeat: no-repeat;
    background-size: 1ex;
    background-origin: content-box;
    background-image: url("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcKICAgeG1sbnM6ZGM9Imh0dHA6Ly9wdXJsLm9yZy9kYy9lbGVtZW50cy8xLjEvIgogICB4bWxuczpjYz0iaHR0cDovL2NyZWF0aXZlY29tbW9ucy5vcmcvbnMjIgogICB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiCiAgIHhtbG5zOnN2Zz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciCiAgIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIKICAgdmVyc2lvbj0iMS4xIgogICBpZD0ic3ZnMiIKICAgdmlld0JveD0iMCAwIDM1Ljk3MDk4MyAyMy4wOTE1MTgiCiAgIGhlaWdodD0iNi41MTY5Mzk2bW0iCiAgIHdpZHRoPSIxMC4xNTE4MTFtbSI+CiAgPGRlZnMKICAgICBpZD0iZGVmczQiIC8+CiAgPG1ldGFkYXRhCiAgICAgaWQ9Im1ldGFkYXRhNyI+CiAgICA8cmRmOlJERj4KICAgICAgPGNjOldvcmsKICAgICAgICAgcmRmOmFib3V0PSIiPgogICAgICAgIDxkYzpmb3JtYXQ+aW1hZ2Uvc3ZnK3htbDwvZGM6Zm9ybWF0PgogICAgICAgIDxkYzp0eXBlCiAgICAgICAgICAgcmRmOnJlc291cmNlPSJodHRwOi8vcHVybC5vcmcvZGMvZGNtaXR5cGUvU3RpbGxJbWFnZSIgLz4KICAgICAgICA8ZGM6dGl0bGU+PC9kYzp0aXRsZT4KICAgICAgPC9jYzpXb3JrPgogICAgPC9yZGY6UkRGPgogIDwvbWV0YWRhdGE+CiAgPGcKICAgICB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtMjAyLjAxNDUxLC00MDcuMTIyMjUpIgogICAgIGlkPSJsYXllcjEiPgogICAgPHRleHQKICAgICAgIGlkPSJ0ZXh0MzMzNiIKICAgICAgIHk9IjYyOS41MDUwNyIKICAgICAgIHg9IjI5MS40Mjg1NiIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXdlaWdodDpub3JtYWw7Zm9udC1zaXplOjQwcHg7bGluZS1oZWlnaHQ6MTI1JTtmb250LWZhbWlseTpzYW5zLXNlcmlmO2xldHRlci1zcGFjaW5nOjBweDt3b3JkLXNwYWNpbmc6MHB4O2ZpbGw6IzAwMDAwMDtmaWxsLW9wYWNpdHk6MTtzdHJva2U6bm9uZTtzdHJva2Utd2lkdGg6MXB4O3N0cm9rZS1saW5lY2FwOmJ1dHQ7c3Ryb2tlLWxpbmVqb2luOm1pdGVyO3N0cm9rZS1vcGFjaXR5OjEiCiAgICAgICB4bWw6c3BhY2U9InByZXNlcnZlIj48dHNwYW4KICAgICAgICAgeT0iNjI5LjUwNTA3IgogICAgICAgICB4PSIyOTEuNDI4NTYiCiAgICAgICAgIGlkPSJ0c3BhbjMzMzgiPjwvdHNwYW4+PC90ZXh0PgogICAgPGcKICAgICAgIGlkPSJ0ZXh0MzM0MCIKICAgICAgIHN0eWxlPSJmb250LXN0eWxlOm5vcm1hbDtmb250LXZhcmlhbnQ6bm9ybWFsO2ZvbnQtd2VpZ2h0Om5vcm1hbDtmb250LXN0cmV0Y2g6bm9ybWFsO2ZvbnQtc2l6ZTo0MHB4O2xpbmUtaGVpZ2h0OjEyNSU7Zm9udC1mYW1pbHk6Rm9udEF3ZXNvbWU7LWlua3NjYXBlLWZvbnQtc3BlY2lmaWNhdGlvbjpGb250QXdlc29tZTtsZXR0ZXItc3BhY2luZzowcHg7d29yZC1zcGFjaW5nOjBweDtmaWxsOiMwMDAwMDA7ZmlsbC1vcGFjaXR5OjE7c3Ryb2tlOm5vbmU7c3Ryb2tlLXdpZHRoOjFweDtzdHJva2UtbGluZWNhcDpidXR0O3N0cm9rZS1saW5lam9pbjptaXRlcjtzdHJva2Utb3BhY2l0eToxIj4KICAgICAgPHBhdGgKICAgICAgICAgaWQ9InBhdGgzMzQ1IgogICAgICAgICBzdHlsZT0iZmlsbDojMzMzMzMzO2ZpbGwtb3BhY2l0eToxIgogICAgICAgICBkPSJtIDIzNy41NjY5Niw0MTMuMjU1MDcgYyAwLjU1ODA0LC0wLjU1ODA0IDAuNTU4MDQsLTEuNDczMjIgMCwtMi4wMzEyNSBsIC0zLjcwNTM1LC0zLjY4MzA0IGMgLTAuNTU4MDQsLTAuNTU4MDQgLTEuNDUwOSwtMC41NTgwNCAtMi4wMDg5MywwIEwgMjIwLDQxOS4zOTM0NiAyMDguMTQ3MzIsNDA3LjU0MDc4IGMgLTAuNTU4MDMsLTAuNTU4MDQgLTEuNDUwODksLTAuNTU4MDQgLTIuMDA4OTMsMCBsIC0zLjcwNTM1LDMuNjgzMDQgYyAtMC41NTgwNCwwLjU1ODAzIC0wLjU1ODA0LDEuNDczMjEgMCwyLjAzMTI1IGwgMTYuNTYyNSwxNi41NDAxNyBjIDAuNTU4MDMsMC41NTgwNCAxLjQ1MDg5LDAuNTU4MDQgMi4wMDg5MiwwIGwgMTYuNTYyNSwtMTYuNTQwMTcgeiIgLz4KICAgIDwvZz4KICA8L2c+Cjwvc3ZnPgo=");
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<section class="container">
  <form class="form-horizontal">
    <select class="form-control">
      <option>One</option>
      <option>Two</option>
    </select>
  </form>
</section>

සටහන: base64 දේවල් fa-chevron-downSVG හි ඇත.

නවීන බ්‍රව්සර් <select>වල CSS විලාසිතාවට සාපේක්ෂව වේදනා රහිත ය . appearance: noneඑකම උපක්‍රමශීලී කොටස සමඟ ඊතලය ප්‍රතිස්ථාපනය කිරීම (ඔබට අවශ්‍ය නම්). data:සරල පෙළ SVG සමඟ පේළිගත URI භාවිතා කරන විසඳුමක් මෙන්න :

select {
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
  
  background-repeat: no-repeat;
  background-size: 0.5em auto;
  background-position: right 0.25em center;
  padding-right: 1em;
  
  background-image: url("data:image/svg+xml;charset=utf-8, \
    <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 40'> \
      <polygon points='0,0 60,0 30,40' style='fill:black;'/> \
    </svg>");
}

<select>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select style="font-size: 2rem;">
  <option>Option 1</option>
  <option>Option 2</option>
</select>

ඉතිරි මෝස්තර (මායිම්, පෑඩින්, වර්ණ, ආදිය) තරමක් සරල ය.

මෙය මා උත්සාහ කළ සියලුම බ්‍රව්සර්වල ක්‍රියාත්මක වේ (ෆයර්ෆොක්ස් 50, ක්‍රෝම් 55, එජ් 38, සහ සෆාරි 10). ෆයර්ෆොක්ස් පිළිබඳ එක් සටහනක් නම් ඔබට #දත්ත යූආර්අයි (උදා fill: #000) හි ඇති අක්‍ෂරය භාවිතා කිරීමට අවශ්‍ය නම් එයින් ගැලවිය යුතුය ( fill: %23000).

select  {
    outline: 0;
    overflow: hidden;
    height: 30px;
    background: #2c343c;
    color: #747a80;
    border: #2c343c;
    padding: 5px 3px 5px 10px;
    -moz-border-radius: 6px;
    -webkit-border-radius: 6px;
    border-radius: 10px;
}

select option {border: 1px solid #000; background: #010;}

අභිරුචි තෝරන්න CSS මෝස්තර

පරීක්ෂා සඳහා Internet Explorer (10 සහ 11), එජ්, Firefox, සහ Chrome

select::-ms-expand {
  display: none;
}
select {
  display: inline-block;
  box-sizing: border-box;
  padding: 0.5em 2em 0.5em 0.5em;
  border: 1px solid #eee;
  font: inherit;
  line-height: inherit;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  appearance: none;
  background-repeat: no-repeat;
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: right 15px top 1em, right 10px top 1em;
  background-size: 5px 5px, 5px 5px;
}

<select name="">
  <option value="">Lorem</option>
  <option value="">Lorem Ipsum</option>
</select>

<select name="" disabled>
  <option value="">Disabled</option>
</select>

<select name="" style="color:red;">
  <option value="">Color!</option>
  <option value="">Lorem Ipsum</option>
</select>

clipමායිම් සහ selectමූලද්රව්යයේ ඊතලය කැපීමට දේපල භාවිතා කරන්න , ඉන්පසු ඔබේම ආදේශන ශෛලිය එතීමට එක් කරන්න:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          select { position: absolute; clip:rect(2px 49px 19px 2px); z-index:2; }
          body > span { display:block; position: relative; width: 64px; height: 21px; border: 2px solid green;  background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select>
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

බොත්තම ක්ලික් කළ හැකි වන පරිදි ශුන්‍ය පාරාන්ධතාවයෙන් දෙවන තේරීමක් භාවිතා කරන්න:

    <!DOCTYPE html>
    <html>
      <head>
        <style>
          #real { position: absolute; clip:rect(2px 51px 19px 2px); z-index:2; }
          #fake { position: absolute; opacity: 0; }
    
          body > span { display:block; position: relative; width: 64px; height: 21px; background: url(http://www.stackoverflow.com/favicon.ico) right 1px no-repeat; }
        </style>
      </head>
      <span>
        <select id="real">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
        <select id="fake">
          <option value="">Alpha</option>
          <option value="">Beta</option>
          <option value="">Charlie</option>
        </select>
      </span>
    </html>

වෙබ්කිට් සහ අනෙකුත් බ්‍රව්සර් අතර ඛණ්ඩාංක වෙනස් වේ, නමුත් @ මාධ්‍ය විමසුමකට එය ආවරණය කළ හැකිය.

යොමුව

• Dojo FX පරීක්ෂණ: dojox.fx.ext-dojo.complex
• CSS ආවරණ: සෘජු ක්‍රියාකාරීත්වය සහ ස්වයංක්‍රීය අගයන් සහිත ක්ලිප් දේපල මායිම් කොටුව වෙත පරීක්ෂා කරන්න

උපක්‍රමය භාවිතා කරන :afterහා :beforeකළ හැකි ඉතා හොඳ උදාහරණයක් වන්නේ CSS3 | සමඟ මෝස්තර තේරීම් කොටුවයි CSSDeck

මෙම අංගය සංස්කරණය කිරීම නිර්දේශ නොකරයි, නමුත් ඔබට උත්සාහ කිරීමට අවශ්‍ය නම් එය වෙනත් ඕනෑම HTML අංගයක් මෙන් වේ.

උදාහරණය සංස්කරණය කරන්න:

/* Edit select */
select {
    /* CSS style here */
}

/* Edit option */
option {
    /* CSS style here */
}

/* Edit selected option */
/* element  attr    attr value */
option[selected="selected"] {
    /* CSS style here */
}

<select>
    <option >Something #1</option>
    <option selected="selected">Something #2</option>
    <option >Something #3</option>
</select>

label {
    position: relative;
    display: inline-block;
}
select {
    display: inline-block;
    padding: 4px 3px 5px 5px;
    width: 150px;
    outline: none;
    color: black;
    border: 1px solid #C8BFC4;
    border-radius: 4px;
    box-shadow: inset 1px 1px 2px #ddd8dc;
    background-color: lightblue;
}

මෙය තෝරාගත් අංග සඳහා පසුබිම් වර්ණයක් භාවිතා කරන අතර මම රූපය ඉවත් කළෙමි ..

ඔව්. ඔබට ඕනෑම HTML අංගයක් එහි ටැග් නාමයෙන් මෝස්තර කළ හැකිය,

select {
  font-weight: bold;
}

ඇත්ත වශයෙන්ම, ඔබට වෙනත් ඕනෑම අංගයක් මෙන් එය හැඩගස්වා ගැනීමට CSS පන්තියක් භාවිතා කළ හැකිය:

<select class="important">
  <option>Important Option</option>
  <option>Another Important Option</option>
</select>

<style type="text/css">
  .important {
    font-weight: bold;
  }
</style>

මෙන්න මේ සාකච්ඡාවෙන් මගේ ප්‍රියතම අදහස් පදනම් කරගත් විසඳුමක්. කිසිදු අමතර සලකුණු කිරීමකින් තොරව <තෝරා ගැනීමේ අංගයක් කෙලින්ම සැකසීමට මෙය ඉඩ දෙයි.

එය ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 (සහ පසුව) ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 8/9 සඳහා ආරක්ෂිත පසුබෑමක් සමඟ ක්‍රියා කරයි. මෙම බ්‍රව්සර් සඳහා එක් අවවාදයක් නම් පසුබිම් රූපය ස්ථානගත කළ යුතු අතර ස්වදේශික පුළුල් පාලනය පිටුපස සැඟවීමට තරම් කුඩා විය යුතුය.

HTML

<select name='options'>
  <option value='option-1'>Option 1</option>
  <option value='option-2'>Option 2</option>
  <option value='option-3'>Option 3</option>
</select>

SCSS

body {
  padding: 4em 40%;
  text-align: center;
}

select {
  $bg-color: lightcyan;
  $text-color: black;
  appearance: none; // Using -prefix-free http://leaverou.github.io/prefixfree/
  background: {
    color: $bg-color;
    image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1255/caret--down-15.png");
    position: right;
    repeat: no-repeat;
  }
  border: {
    color: mix($bg-color, black, 80%);
    radius: .2em;
    style: solid;
    width: 1px;
    right-color: mix($bg-color, black, 60%);
    bottom-color: mix($bg-color, black, 60%);
  }
  color: $text-color;
  padding: .33em .5em;
  width: 100%;
}

// Removes default arrow for Internet Explorer 10 (and later)
// Internet Explorer 8/9 gets the default arrow which covers the caret
// image as long as the caret image is smaller than and positioned
// behind the default arrow
select::-ms-expand {
    display: none;
}

කෝඩ්පෙන්

http://codepen.io/ralgh/pen/gpgbGx

ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 10 වන විට, ඔබට ::-ms-expandව්‍යාජ මූලද්‍රව්‍ය තේරීම විලාසිතාවට භාවිතා කළ හැකි අතර , ඊතල මූලද්‍රව්‍යය සැඟවිය හැක.

select::-ms-expand {
    display:none;
    /* or visibility: hidden; to keep it's space/hitbox */
}

ඉතිරි මෝස්තර අනෙකුත් බ්‍රව්සර් වලට සමාන විය යුතුය.

IE10 සඳහා සහය දක්වන ඩැනීල්ඩ්ගේ jsfiddle හි මූලික දෙබලක මෙන්න

පහසු ක්‍රමයක් තිබේ.

මෙම ප්‍රහේලිකාව පරීක්ෂා කර, අධික ලෙස හැඩගැසීමට මට සමාව දෙන්න: https://jsfiddle.net/dkellner/7ac9us70/

පිටුපස ඇති උපක්‍රමය: <select> ටැගයට "ප්‍රමාණය" නමින් දේපලක් ලැබුණු විගස, එය ස්ථාවර උස ලැයිස්තුවක් ලෙස හැසිරෙනු ඇති අතර, හදිසියේම, කිසියම් හේතුවක් නිසා, එයින් නිරය හැඩගස්වා ගැනීමට ඔබට ඉඩ සලසයි. දැන් තදින්ම කිවහොත්, ස්ථාවර ලැයිස්තුව අතුරු ආබාධයකි - නමුත් එය අපට “පහළට වැටෙන පෙනුම” සඳහා භාවිතා කරන නිසා එය අපට තවත් උපකාරී වේ.

අවම උදාහරණයක්:

<style>

    .stylish span   {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

</style>
...
<div class="stylish">
    <label> Choose your superhero: </label>
    <span>
        <input onclick="$(this).closest('div').find('select').slideToggle(110)"><br>
        <select size=15 onclick="$(this).hide().closest('div').find('input').val($(this).find('option:selected').text());">

            <optgroup label="Fantasy"></optgroup>
            <option value="1">  Gandalf        </option>
            <option value="2">  Harry Potter   </option>
            <option value="3">  Jon Snow       </option>

            <!-- ... and so on -->

        </select>
    </span>
</div>

(එය සරළව තබා ගැනීමට මම එය jQuery සමඟ කළෙමි - නමුත් ඔබට එය නොමැතිව එය කළ හැකිය)

පැති සටහන්

• මෙම විසඳුම ඔබට තෝරා ගැනීමකට වඩා වැඩි යමක් ලබා දෙයි: අගය ද අතින් සංස්කරණය කළ හැකිය. සුපුරුදු තේරීම්-සීමා සහිත ක්‍රමයට ඔබ කැමති නම් කියවීමට පමණක් ඇති දේපල භාවිතා කරන්න.

• මෝස්තරකරණ හැකියාවන් උපරිම කිරීම සඳහා, <optgroup> ටැග් ඔවුන්ගේ දරුවන් වටා නොමැත , ඔවුන් ඔවුන් ඉදිරියේ ගෙන යනු ලැබේ. එය චේතනාන්විත ය, එය දෘශ්‍යමය වශයෙන් පැහැදිලි ය, ඔවුන් මේ ආකාරයට වැඩ කිරීමට සතුටු ය, කරදර නොවන්න.

• ජාවාස්ක්‍රිප්ට්ස්: ඔව් මම දන්නවා OP "ජාවාස්ක්‍රිප්ට් නැහැ" කියා පැවසූ නමුත් මම එය තේරුම් ගත්තා කරුණාකර ප්ලගීන සමඟ කරදර නොවන්න , එය හොඳයි. මේ සඳහා ඔබට පුස්තකාල අවශ්‍ය නොවේ. JQuery පවා නැත, මා කී පරිදි, එය උදාහරණයේ පැහැදිලි බව සඳහා පමණි.

ඔබ අනිවාර්යයෙන්ම එය කළ යුත්තේ මෝස්තර තේරීම, දෘෂ්ටි සමූහය සහ CSS සමඟ ඇති විකල්පයන් ය . බොහෝ ආකාරවලින්, පසුබිම්-වර්ණය සහ වර්ණය ඔබට සාමාන්‍යයෙන් අවශ්‍ය වන්නේ විලාසිතාවේ විකල්පයන් මිස සමස්ත තේරීම නොවේ.

පහත වැටීමට ඔබට හෝවර් ශෛලියක් එක් කළ හැකිය.

select {position:relative; float:left; width:21.4%; height:34px; background:#f9f9e0; border:1px solid #41533f; padding:0px 10px 0px 10px; color:#41533f; margin:-10px 0px 0px 20px; background: transparent; font-size: 12px; -webkit-appearance: none; -moz-appearance: none; appearance: none; background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #f9f9e0;}
select:hover {background: url(https://alt-fit.com/images/global/select-button.png) 100% / 15% no-repeat #fff;}

<html>
<head>
</head>
<body>
<select name="type" class="select"><option style="color:#41533f;" value="Select option">Select option</option>
<option value="Option 1">Option 1</option>
<option value="Option 2">Option 2</option>
<option value="Option 3">Option 3</option>
</select>
</body>
</html>

ඩැනීල්ඩ්ගේ පිළිතුරේ තුන්වන ක්‍රමය -ප්‍රයෝග සහ වෙනත් මූසික සිදුවීම් සමඟ වැඩ කිරීමට වැඩි දියුණු කළ හැකිය. සලකුණු කිරීමේදී තෝරාගත් අංගයට පසුව “බොත්තම” - මූලද්‍රව්‍යය පැමිණෙන බවට වග බලා ගන්න. + CSS තේරීම භාවිතා කර එය ඉලක්ක කරන්න:

HTML:

<select class="select-input">...</select>
<div class="select-button"></div>

CSS:

.select-input:hover+.select-button {
    <Hover styles here>
}

කෙසේ වෙතත්, මෙය "බොත්තම" හරහා පමණක් නොව, තෝරාගත් මූලද්රව්යය මත ඕනෑම තැනක සැරිසැරීමේදී හෝවර් ආචරණය පෙන්වයි.

මම මෙම ක්‍රමය කෝණික සමඟ ඒකාබද්ධව භාවිතා කරමි (මගේ ව්‍යාපෘතිය කෙසේ හෝ කෝණික යෙදුමක් වන බැවින්), සම්පූර්ණ තෝරාගත් අංගය ආවරණය කිරීම සඳහා, සහ තෝරාගත් විකල්පයේ පෙළ “බොත්තම” -එලමයෙන් කෝණික ප්‍රදර්ශනය කිරීමට ඉඩ දෙන්න. මෙම අවස්ථාවෙහිදී, තෝරාගත් ඕනෑම තැනක සැරිසැරීමේදී හෝවර්-ආචරණය අදාළ වන බව පරිපූර්ණ අර්ථයක් ලබා දෙයි.

එය ජාවාස්ක්‍රිප්ට් නොමැතිව ක්‍රියා නොකරයි, එබැවින් ඔබට මෙය කිරීමට අවශ්‍ය නම් සහ ඔබේ වෙබ් අඩවිය ජාවාස්ක්‍රිප්ට් නොමැතිව වැඩ කළ යුතු නම්, ඔබේ ස්ක්‍රිප්ට් වැඩි දියුණු කිරීම සඳහා අවශ්‍ය අංග සහ පන්ති එකතු කරන බවට වග බලා ගත යුතුය. ඒ ආකාරයෙන්, නිවැරදිව යාවත්කාලීන නොවන මෝස්තර සහිත ලාංඡනයක් වෙනුවට ජාවාස්ක්‍රිප්ට් නොමැති බ්‍රව්සරයකට සාමාන්‍ය, අස්ථිර, තෝරාගත් එකක් ලැබෙනු ඇත.

CSS සහ HTML පමණක් විසඳුමක්

එය ක්‍රෝම්, ෆයර්ෆොක්ස් සහ ඉන්ටර්නෙට් එක්ස්ප්ලෝරර් 11 සමඟ අනුකූල බව පෙනේ. නමුත් කරුණාකර වෙනත් වෙබ් බ්‍රව්සර් සම්බන්ධයෙන් ඔබගේ ප්‍රතිපෝෂණය තබන්න.

ඩැනීල්ඩ්ගේ පිළිතුරෙන් යෝජනා කර ඇති පරිදි, අපේක්ෂිත හැසිරීම ලබා ගැනීම සඳහා මම මගේ තේරීම ඩිවි එකකින් (එක්ස් බ්‍රව්සර් අනුකූලතාව සඳහා බෙදීම් දෙකක්) ඔතා.

Http://jsfiddle.net/bjap2/ බලන්න

HTML:

<div class="sort-options-wrapper">
    <div class="sort-options-wrapper-2">
        <select class="sort-options">
                <option value="choiceOne">choiceOne</option>
                <option value="choiceOne">choiceThree</option>
                <option value="choiceOne">choiceFour</option>
                <option value="choiceFiveLongTestPurpose">choiceFiveLongTestPurpose</option>
        </select>
    </div>
    <div class="search-select-arrow-down"></div>
</div>

ඩිවර් එතීම් දෙක සැලකිල්ලට ගන්න.

ඊතල-පහළ බොත්තම ඔබ කැමති තැනක තැබීම සඳහා එකතු කරන ලද අමතර කොටසද බලන්න (නියත වශයෙන්ම ස්ථානගත කර ඇත), මෙන්න අපි එය වම් පස තබමු.

CSS

.sort-options-wrapper {
    display: inline-block;
    position: relative;
    border: 1px solid #83837F;
}

/* This second wrapper is needed for x-browser compatibility */
.sort-options-wrapper-2 {
    overflow: hidden;
}

select {
    margin-right: -19px; /* That's what is hiding the default-provided browser arrow */
    padding-left: 13px;
    margin-left: 0;
    border: none;
    background: none;

    /* margin-top & margin-bottom must be set since some
       browsers have default values for select elements */
    margin-bottom: 1px;
    margin-top: 1px;
}

select:focus {
    outline: none; /* Removing default browsers outline on focus */
}
.search-select-arrow-down {
    position: absolute;
    height: 10px;
    width: 12px;
    background: url(http://i.imgur.com/pHIYN06.png) scroll no-repeat 2px 0px;
    left: 1px;
    top: 5px;
}