質問する
336 次
1 に答える
0
あなたが抱えている問題は、要素のサイズがソースにハードコーディングされていることです。これは、コードの記述方法の残念な副作用です。複数のスタイルを受け入れるようにソース コードに多くの変更を加えることができますが、CSSと追加の HTML を少しだけ使用する方がよいでしょう。
HTML が次のようになっている場合:
<label for="first">Specially styled select box</label>
<div class="styled-select">
<select name="first">
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
<label for="first">Specially styled select box, with massive text</label>
<div class="styled-select">
<select name="second" class="massive">
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
スタイルシートは次のようになります。
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(http://cdn.bavotasan.com/wp-content/uploads/2011/05/down_arrow_select.jpg) no-repeat right #DDD;
}
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
border: 1px solid #CCC;
font-size: 16px;
height: 34px;
-webkit-appearance: none;
-webkit-border-radius: 3px;
border-radius: 3px;
}
select.massive {
font-size: 24px;
padding-top: 1px;
padding-right: 55px;
padding-bottom: 0;
}
この jsfiddleで実際に動作するのを見てください。
(情報源: bavotsan.com )
于 2012-05-14T21:48:49.553 に答える