CODEWITHSUNDEEP
htmlcssbackground-color
user3819987
user3819987

Reputation: 1

Change color text in select html

I have a dropdown menu for country selections. The color on the screen needs to be white but now the dropdown selection is also white with a white background. Is there a way to change that?

CSS:

.styled-select select {
    background: url('images/dob-field-bg2.png') no-repeat;
    outline: none;
    width: 250px;
    padding: 5px;
    font: 20px bold helvetica, arial, sans-serif;
    color: #fff;
    border: 0;
    border-radius: 0;
    height: 50px;
    -webkit-appearance: none;
}

HTML:

<div class="styled-select">
    <select name="Country">
        <option value="" selected="selected">Select Country</option>
        <option value="United States">United States</option>
        <option value="United Kingdom">United Kingdom</option>
        <option value="Afghanistan">Afghanistan</option>
        <option value="Albania">Albania</option>
        <option value="Algeria">Algeria</option>
        <option value="American Samoa">American Samoa</option>
        <option value="Andorra">Andorra</option>
    </select>
</div>

Upvotes: 0

Views: 5049

Answers (2)

Rishabh Shah
Rishabh Shah

Reputation: 679

Just change the color: #fff to color: #000

Upvotes: 0

G.L.P
G.L.P

Reputation: 7207

Try to add like this: DEMO

CSS:

select option{
    color:#333;
}

You can add background-color for options like this: DEMO

CSS with background-color for dropdown:

select option {
    color:#333;
    background-color:yellow;
}

Upvotes: 1

Related Questions