以下に示すように、選択を 1 つだけ含む div を配置しようとしていますが、機能しません。
vertical-align にどのオプションを選択しても、何も起こりません。以下は、クラス styled-select の div と内部の選択の css です。
div.styled-select {
width: 100px;
height: 17px;
overflow: hidden;
background: url(../../../../images/downarrow_blue.png) no-repeat right white;
display: inline-block;
position:relative;
float: left;
vertical-align: sub
}
.styled-select select {
background: transparent;
-webkit-appearance: none;
width: 117px;
height: 17px;
border: 0;
position: absolute;
left: 0;
top: 0;
}
// HTML code
<p/>
<form action="/prepareUpdateCategoryList.do?forwardto=search">
<fieldset class="block">
<label style="width:80px">Class</label>
<div class="styled-select">
<select>
<option value="0">Select </option>
<option value="7382">steam </option>
</select>
</div>
<input type="text" name="fname">
<input type="submit" value="Submit">
</fieldset>
</form>