Как назначить стиль атрибуту SELECTED?

Question

HTML:

<div class="col5"> 
    <a href="#">DOMINICAN</a><br><br> 
    <div class="img"><a href="#"><img src="images/prod01.jpg" alt=""></a></div> 
    <div class="selectransfer"> 
     <span class="opensans size13"><b>Type of Transfer</b></span> 
     <select class="form-control mySelectBoxClass"> 
      <option>Round Trip</option> 
      <option>One Way Arrival</option> 
      <option selected>One Way Departure</option> 
     </select> 
    </div> 
</div> 

То, что я хочу, чтобы выровнять «выбранный» вариант (Round Trip) слева, я хочу, чтобы иметь возможность контролировать этот атрибут (выбран).

Любые предложения?

Answer 1

я точно не понимаю, что вы хотите изменить (после того, как опции выравнивание по левому краю), но вы можете контролировать этот элемент таким образом:

option[selected] { 
    color: blue; 
} 

И если вы хотите, чтобы контролировать ток выбранный вариант, вы можете использовать это:

option:checked { 
    color: red; 
} 

JSFiddle: http://jsfiddle.net/9njpjdy0/1/

Подробнее: http://www.w3schools.com/css/css_attribute_selectors.asp http://www.w3schools.com/cssref/sel_checked.asp

Дайте ему попробовать и дайте мне знать, если это поможет!

Answer 2

<!-- language: lang-css --> 

    #selectransfer { 

     text-align: left; 
     vertical-align: center; 

     } 

    .opensans_size13 { 
     text-align: left; 
     vertical-align: top; 
     position: absolute; 
     } 

    .form_control_mySelectBoxClass { 
     margin-top: 45px; 
     position:relative; 
     } 

    option[selected] { 
    color: red; 
     } 

<!-- language: lang-html --> 

<div class="col5"> 
    <a href="#">DOMINICAN</a><br><br> 
    <div class="img"><a href="#"><img src="images/prod01.jpg" alt=""></a></div> 
    <div class="selectransfer"> 
     <span class="opensans_size13"><b>Type of Transfer</b></span> 
     <select class="form_control_mySelectBoxClass"> 
      <option>Round Trip</option> 
      <option>One Way Arrival</option> 
      <option selected>One Way Departure</option> 
     </select> 
    </div> 
</div>