كيف يمكنني نمط <حدد> المنسدلة مع CSS فقط؟

https://stackoverflow.com/questions/1895476

19-09-2019
|

سؤال

هل هناك طريقة CSS فقط لحساس <select> اسقاط؟

أحتاج أن أسلوب أ <select> تشكل بقدر الإمكان، دون أي جافا سكريبت. ما هي العقارات التي يمكنني استخدامها للقيام بذلك في CSS؟

يجب أن يكون هذا الرمز متوافقا مع جميع المتصفحات الرئيسية:

Internet Explorer 6 و 7 و 8
ثعلب النار
رحلات السفاري

أعلم أنني أستطيع أن أجعلها مع جافا سكريبت: مثال.

وأنا لا أتحدث عن التصميم البسيط. أريد أن أعرف، ما أفضل ما يمكننا القيام به مع CSS فقط.

وجدت أسئلة مماثلة على فائض المكدس.

و هذا على doctype.com.

المحلول

فيما يلي ثلاث حلول:

الحل رقم 1 - المظهر: بلا - مع Internet Explorer 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 لديه دعم متصفح جيد جدا (هل بإمكاني استخدم) - باستثناء Internet Explorer 11 (والإصدارات الأحدث) و Firefox 34 (وبعد ذلك).

يمكننا تحسين هذه التقنية وإضافة دعم ل Internet Explorer 10 و Internet Explorer 11 عن طريق إضافة

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

إذا كان Internet Explorer 9 مصدر قلق، فلن يكون لدينا طريقة لإزالة السهم الافتراضي (مما يعني أننا سنحصل الآن على سهمين)، ولكن يمكننا استخدام محدد Selection Funky Internet Explorer 9.

إلى ما لا يقل عن التراجع عن السهم المخصص - ترك السهم الافتراضي SELECT سليم.

/* 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(http://www.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>

هذا الحل سهل ولديه دعم متصفح جيد - يجب أن يكفي بشكل عام.

إذا كان دعم المتصفح ل Internet Explorer 9 (والإصدارات الأحدث) و Firefox 34 (والإصدارات الأحدث) ضروريا ثم استمر في القراءة ...

حل # 2 اقتطاع عنصر المحدد لإخفاء السهم الافتراضي (التجريبي)

(اقرأ المزيد هنا)

لف select عنصر في DIV مع عرض ثابت و overflow:hidden.

ثم أعط ذلك select عنصر عرض حول 20 بكسل أكبر من div.

والنتيجة هي أن السهم المنسدل الافتراضي لل select سيتم إخفاء العنصر (بسبب overflow:hidden على الحاوية)، ويمكنك وضع أي صورة خلفية تريدها على الجانب الأيمن من DIV.

ال مميزات من هذا النهج هو أنه متصفح عبر الإنترنت (Internet Explorer 8 والإصدارات الأحدث، Webkit., ، و وزغة). ومع ذلك، و غير مؤات من هذا النهج هو أن الخيارات المنسدلة تنعسل على الجانب الأيمن (بحلول 20 بكسل التي اختبأنا ... لأن عناصر الخيار تأخذ عرض عنصر المحدد).

Enter image description here

تجدر الإشارة إلى أنه إذا كان عنصر تحديد مخصص ضروري فقط التليفون المحمول الأجهزة - ثم لا تنطبق المشكلة أعلاه - بسبب الطريقة التي يفتح بها كل هاتف أصلا عنصر المحدد. لذلك للجوال، قد يكون هذا هو الحل الأفضل.

.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(http://www.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. - لكنك لا تحتاج إلى دعم الإصدارات القديمة من Internet Explorer - ثم استمر في القراءة ...

الحل رقم 3 - استخدام pointer-events خاصية (التجريبي)

(اقرأ المزيد هنا)

تتمثل الفكرة هنا في تراكب عنصر عبر السهم المنسدل الأصلي (لإنشاء واحد مخصص واحد) ثم عدم السماح بأحداث المؤشر عليها.

مميزات: يعمل بشكل جيد في WebKit وأبحرة. يبدو جيدا جدا (لا تخلص من option عناصر).

في وضعه Internet Explorer (Internet Explorer 10 وأسفل) لا يدعم pointer-events, ، مما يعني أنه لا يمكنك النقر فوق السهم المخصص. أيضا، أي عيب آخر (واضح) مع هذه الطريقة هو أنه لا يمكنك استهداف صورة السهم الجديدة الخاصة بك مع تأثير تحوم أو مؤشر يد، لأن لدينا أحداث مؤشر معطلة فقط عليها!

ومع ذلك، مع هذه الطريقة، يمكنك استخدام التعليقات الحديثة أو التعليقات الشرطية لجعل Internet Explorer تعود إلى السهم المعياري المدمج في السهم.

ملحوظة: كونك أن Internet Explorer 10 لا يدعم conditional comments بعد الآن: إذا كنت ترغب في استخدام هذا النهج، يجب عليك استخدامها modernizr.. وبعد ومع ذلك، لا يزال من الممكن استبعاد الأحداث المؤشر من CSS من Internet Explorer 10 مع موصف Hack 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(http://www.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]-->

نصائح أخرى

من الممكن، ولكن لسوء الحظ في المتصفحات القائمة على WebKit إلى حد ما نحن، كمطورين، تتطلب. هنا هو مثال لتصميم CSS الذي تم جمعه من لوحة خيارات Chrome عبر مفتش أدوات المطور المدمج، وتحسين المباراة خصائص 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-AS القياسي وإضافة سهم PNG، ووضع بعض التباعد قبل وبعد التسمية، أي شيء تقريبا تريده.

الجزء الأكثر أهمية هو appearance الممتلكات، التي تتغير كيف يتصرف العنصر.

إنه يعمل بشكل مثالي في متصفح WebKit تقريبا، بما في ذلك الأجهزة المحمولة، على الرغم من أن Gecko لا يدعم appearance وكذلك Webkit، يبدو.

عنصر المحدد وميزة المنسدلة نكون من الصعب الاسلوب.

سمات نمط لمحدد عنصر من قبل كريس هيلمان يؤكد ما قاله ريان دويري في تعليق لأول إجابة:

"عنصر المختار هو جزء من نظام التشغيل، وليس كروم المتصفح. لذلك، فمن غير موثوق جدا على النمط، وليس بالضرورة من المنطقي أن تجرب على أي حال."

أكبر عدم تناسق لاحظت عند التصميم اختيار المنسدلة رحلات السفاري و جوجل كروم التقديم (فايرفوكس قابل للتخصيص بالكامل من خلال CSS). بعد بعض البحث من خلال أعماق غامضة من الإنترنت، صادفت ما يلي، مما يحل تماما مؤهلاتي بالكامل مع WebKit:

Safari و Google Chrome Fix:

select {
  -webkit-appearance: none;
}

هذا، ومع ذلك، قم بإزالة السهم المنسدل. يمكنك إضافة سهم المنسدلة باستخدام قريب div مع وجود خلفية، هامش سلبي أو وضع مطلقا على القائمة المنسدلة.

* مزيد من المعلومات وغيرها متغير الممتلكات CSS: -Webkit-مظهر.

<select> يمكن تصريح العلامات من خلال CSS تماما مثل أي عنصر HTML آخر على صفحة HTML المقدمة في متصفح. فيما يلي مثال (بسيط للغاية) الذي سيقوم بوضع عنصر محدد في الصفحة وتقديم نص الخيارات باللون الأزرق.

مثال ملف 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 ونظام موضوعي صغير.

: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>

فيما يلي نسخة تعمل في جميع المتصفحات الحديثة. المفتاح يستخدم 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>

بلوق بريد كيفية نموذج 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>

وصلت إلى قضيتك باستخدام bootstrap.. وبعد هذا هو أبسط الحل الذي يعمل:

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>

ملاحظة: The Base64 Stuff fa-chevron-down في SVG.

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;}

في المتصفحات الحديثة، من غير مؤلم نسبيا بأناقة <select> في CSS. مع appearance: none الجزء الصعب الوحيد هو استبدال السهم (إذا كان هذا ما تريد). إليك حلا يستخدم مضمون data: URI مع SVG النص عادي:

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>

ما تبقى من التصميم (الحدود، الحشو والألوان، إلخ) واضح إلى حد ما.

يعمل هذا في جميع المتصفحات التي جربتها للتو (Firefox 50، Chrome 55، Edge 38، Safari 10). ملاحظة واحدة حول Firefox هي أنه إذا كنت ترغب في استخدام # شخصية في البيانات URI (على سبيل المثال fill: #000) تحتاج إلى الهروب من ذلك (fill: %23000).

استخدم ال 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>

استخدم SELECT ثانية مع صفر عتامة لجعل الزر Clyperable:

    <!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>

إحداثيات تختلف بين WebKit والمتصفحات الأخرى، ولكن @ media query. يمكن أن تغطي ذلك.

مراجع

مثال لطيف للغاية يستخدم :after و :before للقيام الحيلة في التصميم الاختيار مع CSS3 | CSSDeck.

نعم. يمكنك تصميم أي عنصر 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>

قم بتحرير هذا العنصر غير مستحسن، ولكن إذا كنت ترغب في محاولة مثل أي عنصر آخر 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>

بالتأكيد يجب أن تفعل ذلك كما في تصميم التصميم والتفريخ والخيارات مع CSS. وبعد في نواح كثيرة، لون الخلفية والألوان هي فقط ما تحتاجه عادة إلى خيارات النمط، وليس تحديد كامل.

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;
}

يستخدم هذا لون خلفية لمحدد عناصر وأزلت الصورة ..

اعتبارا من Internet Explorer 10، يمكنك استخدام ::-ms-expand محدد عنصر الزائفة إلى النمط، والاختباء، عنصر السهم المنسدل.

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

يجب أن يكون التصميم المتبقي مشابه للمتصفحات الأخرى.

فيما يلي شوكة أساسية ل JSfiddle Danield التي تنطبق على دعم IE10

إليك حل بناء على أفكاري المفضلة من هذه المناقشة. هذا يسمح التصميمu003Cselect> عنصر مباشرة دون أي علامات إضافية.

يعمل Internet Explorer 10 (والإصدارات الأحدث) مع تراجع آمن للبرنامج Internet Explorer 8/9. تحذير واحد لهذه المتصفحات هو أن صورة الخلفية يجب أن تكون واضحة وتكون صغيرة بما يكفي للاختباء وراء التحكم الأصل الأصلي.

لغة البرمجة

<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.

هناك طريقة لحسم علامات اختيار.

إذا كان هناك معلمة "حجم" في العلامة، فسيتم تطبيق أي CSS تقريبا. باستخدام هذه الخدعة، قمت بإنشاء كمان يعادل عمليا علامة اختيار عادية، بالإضافة إلى أن القيمة التي يمكن تحريرها يدويا مثل مجموعة مختصرات باللغات البصرية (إلا إذا وضعت يقرأ فقط في علامة الإدخال).

إذن إليك مثال على الحد الأدنى لرؤية المبدأ وراء:
(ستحتاج إلى جيسرية لآلية النقر):

<style>

    /* only these 2 lines are truly required */
    .stylish span {position:relative;}
    .stylish select {position:absolute;left:0px;display:none}

    /* now you can style the hell out of them */
    .stylish input    { ... }
    .stylish select   { ... }
    .stylish option   { ... }
    .stylish optgroup { ... }

</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="gandalf">Gandalf</option>
            <option value="harry">Harry Potter</option>
            <option value="jon">Jon Snow</option>

            <optgroup label="Comics"></optgroup>
            <option value="tony">Tony Stark</option>
            <option value="steve">Steven Rogers</option>
            <option value="natasha">Natasha Romanova</option>

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

إليك كمان مع بعض الأنماط:https://jsfiddle.net/dkellner/7ac9us70/

(لقد تجاوزت بالطبع، فقط لإظهار الاحتمالات.)

لاحظ كيف لا تغليف العلامات الخيارات التي تنتمي إليهم كما يجب عليهم؛ نعم هذا مقصود، إنه للتصميم. (الطريقة المعالجة جيدة ستكون أقل صحة.) ونعم أنها تعمل بشكل جيد تماما بهذه الطريقة.

قبل أن يشير أي شخص إلى جزء NO-JS: أعرف أن السؤال قال "لا جافا سكريبت". بالنسبة لي، هذا هو أشبه من فضلك لا تهتم الإضافات، وأنا أعلم أنهم يستطيعون القيام بذلك ولكني بحاجة إلى الطريقة الأصلية. وبعد فهم، لا توجد إضافات، لا توجد برامج نصية إضافية مضمنة، فقط ما يناسب داخل "onclick" في العلامة. التبعية الوحيدة هي jQuery، لتجنب "المستند" الأصلي "The Madness. ولكن يمكن أن تعمل بهذه الطريقة. نعم، هذه علامة اختيار أصلية مع التصميم الأصلي وبعض معالجات OnClick. من الواضح أنه ليس "حل جافا سكريبت".

استمتع!

يمكنك أيضا إضافة نمط تحوم إلى القائمة المنسدلة.

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 الحل فقط

يبدو متوافقا مع Chrome و Firefox و Internet Explorer 11. ولكن يرجى ترك تعليقاتك بشأن متصفحات الويب الأخرى.

كما اقترح ذلك إجابة دانيلد, ، أنا التفاف بلدي الاختيار في DIV (حتى اثنين divs توافق متصفح x) للحصول على السلوك المتوقع.

انظر http://jsfiddle.net/bjap2/

لغة البرمجة:

<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>

لاحظ مغلفة الحف.

لاحظ أيضا إضافي 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;
}

الطريقة الثالثة في إجابة دانيلد يمكن تحسينها للعمل مع تأثيرات التحويم وأحداث الماوس الأخرى. فقط تأكد من أن "الزر" يأتي مباشرة بعد عنصر المحدد في العلامة. ثم استهدفها باستخدام محدد + CSS:

لغة البرمجة:

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

CSS:

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

ومع ذلك، فإن هذا سوف تظهر تأثير التحويم عند الحور في أي مكان عبر عنصر المختار، وليس فقط على زر "زر".

أنا أستخدم هذه الطريقة بالاشتراك مع الزاوي (نظرا لأن مشروعي يحدث لتطبيق الزاوي على أي حال)، لتغطية عنصر الاختيار بأكمله، واسمحوا الزاوي عرض نص الخيار المحدد في "الزر" -Element. في هذه الحالة، فإنه منطقي مثالي ينطبق تأثير التحويم عند الحور في أي مكان على التحديد.

لا يعمل بدون جافا سكريبت، لذلك إذا كنت ترغب في القيام بذلك، يجب على موقعك العمل بدون جافا سكريبت، يجب عليك التأكد من أن البرنامج النصي يضيف العناصر والفئات الضرورية للتحسين. بهذه الطريقة، ستحصل المستعرض دون JavaScript ببساطة على تحديد طبيعية وغير رسمية، بدلا من شارة مصممة لا يتم تحديثها بشكل صحيح.

مخصص حدد أنماط CSS

اختبار في Internet Explorer (10 و 11)، حافة، فايرفوكس، والكروم

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>

مرخصة بموجب: CC-BY-SA مع الإسناد

لا تنتمي إلى StackOverflow