how to give color in the select field and option field?

Question

I made contact form in my website and I want to add color in my select field like other fields. Right now when I choose one of any option in Select field, no option is showing in that field. What mistake I am doing here? Please check issue on the following link.

http://shahfahad.com/demo/contact.html

You might want to post the code handling this particular element (css & html) — Martin, Jun 02 '18 at 16:53

score 2 · Answer 1 · answered Jun 02 '18 at 18:08

2

You can try changing the color of each option tag inside your select tag via CSS.

For example:

select option {
    background-color: green;  
}

<select>
    <option>Please choose</option>
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
    <option>Option 4</option>
</select>

Note that you don't have to target all select tags in your CSS, you can also use its id

This should answer your question if I understood correctly.

answered Jun 02 '18 at 18:08

Milos Lazarevic

76
4

but why my select is not showing my option ? when I choose one of any option , there will be no display in select field – Shah Fahad Jun 02 '18 at 18:17
After reviewing your code a little bit via chrome dev tools I have discovered that the problem lies in your `form-control` class. Perhaps the `background:none;` is what causes the problem of your option not showing in the select field. Try deleting or changing that code and see if it works. – Milos Lazarevic Jun 02 '18 at 19:01

score 0 · Answer 2 · answered Jun 05 '18 at 19:54

I was able to view the code with Mozilla's inspector and successfully test the problem. The problem was that you have your color property was set to be inherit so it'll be the same color of your background. That just makes it invisible. Instead set the property to a visible color other than the same one. Try this snippet.

.form-control {
    background: none;
    border-radius: 0;
    border: 1px solid #fff;
    font-size: 18px;
    text-transform: uppercase;
    font-family: 'PT Sans Narrow', sans-serif;
    height: 44px;
    letter-spacing: 1px;
    padding: 26px 10px 26px 15px;
    color: black !important; /* Set the text color to be black, not inherited to the background */
}
.form-control {
    display: block;
    width: 100%;
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: black;
    background-color: #fff;
    background-image: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    -webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    box-shadow: inset 0 1px 1px rgba(0,0,0,.075);
    -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
    -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
    transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
}
button, input, select, textarea {
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
}
button, select {
    text-transform: none;
}
option {
    margin: 0;
    font: inherit;
        font-size: inherit;
        line-height: inherit;
        font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    font-family: inherit;
    font-color: black; /* Set the text color to be black, not inherited to the background */
 }
* {
    -webkit-box-sizing: border-box;
        box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}
body {
    font-size: 16px;
    font-family: 'PT Sans', sans-serif;
    color: #414141;
}
html {
    font-size: 10px;
}
html {
    font-family: sans-serif;
    -webkit-text-size-adjust: 100%
 ;
}
/* Change the background of all choices */
option {
background-color: blue;
color: gray; /* This is the color of text */
}
#Responsive {
background-color: lightblue;
}

 <h2> You could change the background/color of all options. </h2>
<select id="form_service" name="service" class="form-control" title="Please Select Your Service" required="" data-error="Select Your Service.">
 <option disabled="">Choose Your Require Service</option>
  <option value="Responsive Website Desin">Responsive Website Design</option>                                        
 <option value="Wordpress Website Design">Wordpress Website Design</option>
  <option value="Only Template/PSD Design">Only Template/PSD Design</option>
 <option value="PSD to HTML">PSD to HTML</option>
  <option value="PSD to Wordpress">PSD to Wordpress</option>
 <option>Banner Design</option>                                        
</select>
 <h2> You could change the background/color of a specific option. </h2>
<select id="form_service" name="service" class="form-control" title="Please Select Your Service" required="" data-error="Select Your Service.">
 <option disabled="">Choose Your Require Service</option>
  <option id="Responsive">Responsive Website Design</option>                                        
 <option>Wordpress Website Design</option>
  <option>Only Template/PSD Design</option>
 <option>PSD to HTML</option>
  <option>PSD to Wordpress</option>
 <option>Banner Design</option>                                        
</select>

how to give color in the select field and option field?

2 Answers2