Search code examples
cssattributesselected

How to assign a style to SELECTED attribute?

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>

What I want is to align the "selected" option (Round Trip) to the left, I want to be able to control this attribute (selected).

Any suggestions?

Solution

  • I didn't understand exactly what you want to change (once the options are left-aligned), but you can control this element in this way:

    option[selected] {
    color: blue;
}

    And if you want to control the current selected option, you can use this:

    option:checked {
    color: red;
}

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

    More info: http://www.w3schools.com/css/css_attribute_selectors.asp http://www.w3schools.com/cssref/sel_checked.asp

    Give it a try and let me know if it helps!