Как стиль только с CSS?

Примечание: этот вопрос не о создании пользовательского выпадающего списка. Речь идет только о возможностях укладки <option> элементы в элементе select в CSS



как я могу стиль <option>С <select> элемент с кроссбраузерной совместимостью? Я знаю много способов JavaScript, которые настраивают выпадающий список для преобразования в <li>, о котором я не спрашиваю.



<select class="select">

    <option selected>Select</option>

    <option>Blue</option>

    <option >Red</option>

    <option>Green</option>

    <option>Yellow</option>

    <option>Brown</option>

</select>


Я спрашиваю, Что может быть возможно только с CSS, с совместимостью для IE9+, Firefox и Хром.



enter image description here



Я хочу, чтобы стиль такой или как можно ближе.



enter image description here



Я пробовал здесь http://jsfiddle.net/jitendravyas/juwz3/3/, но Chrome не показывает никакого стиля, кроме цвета шрифта, в то время как Firefox показывает еще немного. Как получить границы и обивка работы в Chrome тоже?

652   3  

3 ответов:

редактировать 2015 мая

отказ от ответственности: я взял фрагмент из ответа ниже:

Важное Обновление!

в дополнение к WebKit, начиная с Firefox 35 мы сможем использовать appearance свойства:

используя -moz-appearance С none значение в выпадающем списке теперь удалите выпадающая кнопка

так что теперь, чтобы скрыть стиль по умолчанию, это как легко, как добавление следующих правил на нашем элементе select:

select {
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
}

для поддержки IE 11, вы можете использовать [::-ms-expand][15].

select::-ms-expand { /* for IE 11 */
    display: none;
}

Ответ

к сожалению, то, что вы спрашиваете, невозможно с помощью чистого CSS. Однако, вот что-то подобное, что вы можете выбрать в качестве обходного пути. Проверьте живой код ниже.

div { 
  margin: 10px;
  padding: 10px; 
  border: 2px solid purple; 
  width: 200px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}
div > ul { display: none; }
div:hover > ul {display: block; background: #f9f9f9; border-top: 1px solid purple;}
div:hover > ul > li { padding: 5px; border-bottom: 1px solid #4f4f4f;}
div:hover > ul > li:hover { background: white;}
div:hover > ul > li:hover > a { color: red; }
<div>
  Select
  <ul>
    <li><a href="#">Item 1</a></li>
    <li><a href="#">Item 2</a></li>
    <li><a href="#">Item 3</a></li>
  </ul>
</div>

EDIT

вот в чем вопрос это вы спрашивали некоторое время назад. как создать выпадающий список Как там говорится, только в Chrome и в какой-то степени в Firefox вы можете добиться того, чего хотите. В противном случае, к сожалению, нет кросс-браузерного чистого CSS-решения для стилизации select.

68  
2017-05-23 15:10:05

нет кросс-браузерного способа стилизации элементов опции, конечно, не в объеме вашего второго скриншота. Возможно, вы сможете сделать их полужирными и установить размер шрифта, но это будет примерно так...

4  
2013-06-12 23:42:17

Я играл с выбранными элементами раньше и без переопределения функциональности с помощью JavaScript, я не думаю, что это возможно в Chrome. Независимо от того, используете ли вы плагин или пишете свой собственный код, CSS только не подходит для Chrome/Safari, и, как вы сказали, Firefox лучше справляется с этим.

2  
2016-09-21 01:16:58

Comments

    Ничего не найдено.
Click here to cancel reply.