Как использовать вставную рамку-тень на элементе?

Question

Here - пример использования тени для теней для выбранных тегов.

Но там использовался элемент обертки, поэтому атрибут вставки не работает.

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

Answer 1

Это, кажется, работает на input="text", но я сомневаюсь, что он будет работать на select -s

select, input { 
 
    -webkit-box-shadow: 5px 5px 5px #666; 
 
    -moz-box-shadow: 5px 5px 5px #666; 
 
    box-shadow: 5px 5px 5px #666; 
 

 
    display:block; 
 
    margin:20px; 
 
    padding: 3px; 
 
    border: 0; 
 
    outline: 1px solid #666; 
 
}

<input type="text" name="foo" placeholder="First Name" /> 
 

 
<select name="bar"> 
 
    <option value="foobar">Foobar</option> 
 
    <option value="bazbat">Bazbat</option> 
 
</select>

Answer 2

мне удалось это сделать, обернув выберите элемент с делами. Вот рабочий пример: http://jsfiddle.net/UD2QP/779/.

HTML:

<div class="select_wrapper"> 
    <select name="type" id="type"> 
     <option value="week">11 week</option> 
     <option value="month">11 month</option> 
    </select> 
</div> 

CSS:

select, 
div.select_wrapper { 
    display: block; 
    width: 430px; 
    color:#58595b; 
    font-weight: normal; 
    font-size: 16px; 
    font-family: "Arial", sans-serif; 
    padding:5px; 
    margin-top:5px; 
    margin-bottom: 10px; 
    background: #fff; 
    -moz-box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33); 
    -webkit-box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33);   
    box-shadow: inset 0px 0px 7px rgba(0, 0, 0, 0.33); 
    outline: none; 
    border: none; 
    resize:none; 
} 

select {   
    padding: 0px; 
    margin:0px; 
    -webkit-box-shadow: none; 
    -moz-box-shadow: none; 
    box-shadow: none; 
} 

div.select_wrapper { 
    margin:0; 
    padding:5px; 
    margin-top:5px; 
    margin-bottom: 10px; 

}