Apply Box Shadow для выбора внутри тега P

Question

Я хочу добавить тень блока css3 для блока выбора. Работает во всех браузерах, кроме Google Chrome. Поскольку я оборачиваю элементы формы тегами p, я не могу обернуть теги select тегами div (поскольку div внутри p не разрешен в HTML). Есть ли другой способ применить тень блока для блоков выбора в Google Chrome?

HTML-страница

<form method="post">
 <p>
   <label for"option_box"">Title:</label>

    <select name="option_box">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>

 </p>

CSS

select {
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}

Answer 1

Попробуйте этот сайт - http://jsfiddle.net/UD2QP/134/

У них есть рабочее решение, которое я смог использовать на последней версии Chrome. (Я бы прокомментировал выше, но пока не могу.:)

Удачи!

Answer 2

1) Добавить следующие строки в css файл

.shadow_select {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
}
.shadow_select:focus {
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  -moz-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px rgba(82, 168, 236, 0.6);
}

2) Затем примените класс shadow_select для тегов выбора

<select class="shadow_slect">
     <option>AAAAA</option>
     <option>BBBBB</option>
     <option>CCCCC</option> 
</select>

Это работает во всех других браузерах, кроме webkit. для webkit wrap выберите с помощью div. Затем используйте jquery для обнаружения события фокуса на select и примените CSS-класс тени к этому div. (Потому что событие фокуса не может быть применено к div)

Answer 3

Вы можете просто обернуть его с помощью элемента span, а затем применить стиль к этому элементу span

HTML-страница

<span class="select">    
    <select name="option_box">
      <option>Option 1</option>
      <option>Option 2</option>
      <option>Option 3</option>
    </select>
</span>

CSS

span.select {
    box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
    -moz-box-shadow: 0px 0px 8px rgba(0,0,0, 0.1);
    -webkit-box-shadow: rgba(0,0,0, 0.1) 0px 0px 8px;
}