除了选定的选项外,如何使我左对齐?

时间:2018-07-24 04:44:24

标签: css html5

我正在尝试将所有选项(除了选定的选项之外)向左对齐,而不更改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>

这是一张图片:

0 个答案:

没有答案