我正在尝试将所有选项(除了选定的选项之外)向左对齐,而不更改HTML结构。我已经插入'text-align:left;'在每个CSS选项中选择“ select:selected”,但它不起作用。
.select_wrapper{
position: relative;
}
select{
display: block;
width: 400px;
padding: .5rem .75rem .5rem 4.75rem;
font-size: 1rem;
line-height: 1.25;
color: #3D3D3D;
background-color: #fff;
background-image: none;
-moz-background-clip: padding-box;
-o-background-clip: padding-box;
background-clip: padding-box;
border: 1px solid rgba(0,0,0,0.15);
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
}
span {
top: 9px;
left: 15px;
position: absolute;
font-family: 'AvenirNextLTW01-Regular';
font-size: 15px;
font-weight: 600;
}
<div class="select_wrapper">
<select >
<option selected="">Alle</option>
<option>Option 1</option>
<option>Option 2</option>
<option>Last long option</option>
</select>
<span>Periode: </span>
</div>
这是一张图片: