Wie zu verwenden inset box-shadow auf select-element?

Hier ist ein Beispiel für die Verwendung von box-shadow auf wählen Sie tags.

Aber es verwendet wrapper-element, so inset-Attribut funktioniert dort nicht.

Ist es möglich, mit inset box-shadow auf select-tag?

InformationsquelleAutor Simon | 2012-05-19
  1. 1

    Habe ich es geschafft, dies zu tun, indem er das select-element mit einem div. Hier ist ein funktionierendes Beispiel - 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;

}
    InformationsquelleAutor 0v3rth3d4wn
  2. 1

    Es scheint zu funktionieren auf input="text" aber ich bezweifle, dass es funktionieren wird auf select-s

    CSS:

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

    HTML:

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

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

    InformationsquelleAutor Zoltan Toth
Schreibe einen Kommentar