CSS - радиус границы для выпадающего списка при использовании тега SELECT? Не сам вход SELECT, а выпадающий список? - PullRequest
Новая
       14

CSS - радиус границы для выпадающего списка при использовании тега SELECT? Не сам вход SELECT, а выпадающий список?

4 голосов
/ 19 января 2012

Я пытаюсь стилизовать раскрывающийся список выбора.

До сих пор я достиг стилизованного эффекта в самом раскрывающемся окне (поле, в котором раскрываются опции), применяя определенные стили ктег выбора.

Вот CSS, который я использовал до сих пор: 

input, select {
    background: #fcfcfc;
    padding: 7px 25px;
    border: 0 none;
    font: bold 12px Arial,Helvetica,Sans-serif;
    color: #6a6f75;
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -moz-box-shadow: , 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset;
    -webkit-background-clip: padding-box;
    -webkit-transition: all 0.7s ease-out 0s;  /* Saf3.2+, Chrome */
    -moz-transition: all 0.7s ease-out 0s;  /* FF4+ */
    -ms-transition: all 0.7s ease-out 0s;  /* IE10? */
    -o-transition: all 0.7s ease-out 0s;  /* Opera 10.5+ */
    transition: all 0.7s ease-out 0s;
}

select {
    padding: 7px 10px;
}

input:focus, select:focus
{
    background: #6699cc;
    color: #e7f3ff;
    text-shadow:
        -1px -1px 0 #666,
        1px -1px 0 #666,
        -1px 1px 0 #666,
        1px 1px 0 #666;
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 0 rgba(0, 0, 0, 0.9) inset;
}

Этот CSS применяется к тегам INPUT и SELECT, найденным на определенной странице.

Теперь, это действительно стиль выпадающего списка события фокуса, с фоном, преобразующимся в синий (работает в Firefox). Тем не менее, я хочу добавить изогнутую границу к выпадающему окну, чтобы он больше сочетался ссам вход select.

Это даст примерно такой эффект: 

( Choose )
( Option )
| Option |
( Option )

По сравнению с этим (простите мои грубые примеры): 

( Choose )
| Option |
| Option |
| Option |

Я пока не знаю, возможно ли это вообще, поскольку стили фона, которые я применил к тегу select, вступают в силу, но стили радиуса границы применяются только к самому входу SELECT, а не к раскрывающемуся значку.n box.

Может ли кто-нибудь, обладающий дополнительными знаниями в этой области, уделить мне несколько минут времени, чтобы просветить меня?

Можно ли добавить изогнутую рамку к раскрывающемуся списку иливозможно ли стилизовать ввод SELECT с изогнутой рамкой?

Ответы [ 2 ]

4 голосов
/ 20 сентября 2012

Как уже упоминал @jakub, вы не сможете стилизовать свой выпадающий список с помощью тегов <select> и <option>.

Вот почему я однажды создал этот плагин jQuery: jQuery.simpleselect

Он копирует поведение HTML <select>, используя div, чтобы вы могли стилизовать все, что захотите, как захотите.И это действительно легко использовать:

HTML 

<select id="the_select" name="the_select"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
</select>​

JS 

$("#the_select").simpleselect();

Эта строкаJavaScript превратит ваши обычные <select> в HTML ниже 

<div class="hidden_select_container"> 
  <select id="the_select" name="the_select" class="simpleselected"> 
    <option value="1">One</option> 
    <option value="2" selected="selected">Two</option> 
    <option value="3">Three</option> 
    <option value="4">Four</option> 
  </select> 
</div> 
<div class="simpleselect" id="simpleselect_the_select"> 
  <div class="placeholder">Two</div> 
  <div class="options"> 
    <div class="option">One</div> 
    <div class="option">Two</div> 
    <div class="option">Three</div> 
    <div class="option">Four</div> 
  </div> 
</div>

Это поведение имеет несколько преимуществ:

  • Вы продолжаете писать регулярно <select> s, поэтомуесли однажды вы захотите прекратить использование плагина, у вас нет HTML-кода для обновления
  • . <select> заменяется на <div> s, поэтому он полностью настраивается
  • . <select> скрыто, не удаляется: если форма отправлена, выбранное значение БУДЕТ отправлено так, как оно должно быть с обычным <select>

Док и скачать: jQuery.simpleselect

4 голосов
/ 19 января 2012

Вы не сможете достичь этого стиля SELECT DROPDOWN, со стандартными элементами формы HTML, вам придется «заменить» выпадающий список / выбрать DIV не элементами формы, а затем обновить выбранное значение либо скрытым элементом формы, либоскрытый выпадающий список.

Если вы получили его несколько таким образом, как вам хотелось бы, он не был бы совместим с несколькими браузерами.

Пример замены jQuery здесь: https://stackoverflow.com/a/8450718/158014

...