What is the method for adding color to the select and option fields?

On my website, I have created a contact form and I am trying to customize the select field by adding colors like other fields. However, when I choose an option from the select field, it is not showing up. Can you please help me identify what mistake I might be making? You can check the issue on the following link:

htmlformscss

Answer №1

If you want to change the color of each option within a select element, you can achieve this with CSS styling.

Here is an 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>

Keep in mind that you can target specific select elements using their id in your CSS, instead of affecting all of them.

This solution should address your query accurately.

Answer №2

Upon inspecting the code using Mozilla's inspector tool, I was able to identify and resolve the issue at hand. The problem stemmed from the color property being set to inherit, resulting in it blending with the background color and hence becoming invisible. To rectify this, simply assign a different visible color to the property. You can make use of the following code 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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Refresh the HTML content within a specified div element

In my index.html, there is a graph (created using d3.js) along with some code that displays a stepper with a number of steps equal to the child nodes of the clicked node: <div ng-include="ctrl.numlab==2 && 'views/stepper-two-labs.htm ...

javascripthtmljqueryangularjs

Data structures of advanced complexity within HTML data attributes

I am delighted by the existence of the html5 data attribute. It's great to be able to input a plain string into html attributes and retrieve them using jquery. However, wouldn't it be wonderful to have more than just a basic string? Is there a ...

javascriptjqueryhtml

Grid sidebar using tailwindcss

I just started using Tailwind CSS, but I'm having trouble understanding how the grid system works! I want my layout to look like this: https://i.sstatic.net/hlHmy.png Here is what I tried, but it's not working as expected: <div class=" ...

htmlcsscss-gridtailwind-css

Halt the CSS transition on the preceding element

I tried to pause a CSS transition and came across a question with a solution that seems similar: Is there a way to pause CSS transition mid-way? However, I couldn't make it work for my code. I suspect the issue lies with the before element. What cou ...

javascripthtmlcss

Creating a List Item with Equal Height as Its Parent Container

<nav> <ul id="navUl"> <li> <div class="settingsDiv"> hey </div> </li> </ul> </nav> I am trying to adjust the height of the div element to match the height of the nav. My g ...

htmlcss

What are some techniques I can use to ensure my image grid is responsive in html/css?

If you want to check out the website, you can visit . The main goal is to create an image grid for a portfolio. It appears really nice on a 1080p screen, but anything below that seems messy and unorganized. Any assistance or suggestions on how to improve ...

htmlcssimagestyles

Tips for adding text dynamically to images on a carousel

The carousel I am using is Elastislide which can be found at http://tympanus.net/Development/Elastislide/index.html. Currently, it displays results inside the carousel after a search, but I am struggling to dynamically add text in order to clarify to use ...

javascriptjqueryhtml

Using Angular directives to pre-select a default option

I am currently working on a select HTML tag with two options, and I want to set the first option as the default choice. My select element includes Angular directives like ng-change and ng-model. I have attempted to achieve this by adding selected = "select ...

htmlangularjsselectangularjs-directive

Tips for positioning a Material UI Button and TextField side by side, perfectly aligned on the same line and height

I am currently working on aligning a <Button> from the Material UI library so that it is positioned at the same height as the <TextField> next to it and perfectly aligned with that field. Both the <Button> and the <TextField> are e ...

cssreactjsmaterial-ui

Within the flask framework, I am experiencing an issue where paragraphs are being overwritten. My goal is to find a

Snippet of HTML: <div class="split left" > <div class="centered"> <div class="container"> <p>Hi!</p> </div> <div class="darker"> <p>{{message}}& ...

pythonhtmlcssflaskjinja2

Access and retrieve data from a string using XPath with JavaScript

My HTML page content is stored as a string shown below: <!DOCTYPE html> <html> <head> <title>Page Title</title> </head> <body> <h1>This is a Heading</h1> <p>This is a paragraph.</p> </ ...

javascripthtmlxpath

css Sibling elements restricted within parent container

Encountering an issue with a star rating css example when more than one fieldset is added. The current CSS code seems to be working fine, but it fails when multiple instances of the same elements [fieldset] are present. I've been struggling to find a ...

htmlcssratingsiblings

Is there a way to replace the default Laravel pagination CSS class with a custom theme CSS class?

Is there a way to update my Laravel pagination CSS to match my theme's CSS? I need help with this adjustment. Here is the HTML for the theme's CSS: <div class="row mt-5"> <div class="col text-center"> ...

htmlcsslaravellaravel-blade

The width property is not being passed down to the table

I'm experiencing difficulties with the scaling of my body content. When the page is initially opened, it scales to 100%. However, when I resize the screen to make it wider, the content gets bigger but when I try to make it smaller again, it remains a ...

htmlcssnetsuite

Tips for showcasing personalized validation alerts with jQuery in the HTML5 format?

One of the Javascript functions I designed is for validating file extensions before uploading: function validateFileExtension(field, extensions){ file_extension = field.val().split('.').pop().toLowerCase(); if ($.inArray(file_extension,exten ...

javascriptjqueryhtmlvalidation

Is there a way to adjust the positioning of an image within a <div> element?

I'm attempting to vertically align an image within a horizontal menu bar. My goal is to adjust the padding/margin of the image using inline CSS. However, I've noticed that when I add margin-top or padding-top, it affects the positioning of all m ...

cssalignment

What is the method for changing the color of text within a button when hovering using CSS?

In my OceanWP WordPress theme, I customized the top-bar menu by adding a button labeled "Post a Job" using CSS. Screenshot Link I have two top-bar menus - one for logged-in users and another for logged-out users. The "post a job" button has a 2px purple ...

csswordpress

Determine whether the child element extends beyond the boundaries of the parent element

I am currently working on determining whether a child element is visible within its parent element. To achieve this, I am comparing the width of the parent element to the position of the child element using position().left. Given that I have multiple dist ...

jquerycss

execute a retrieval query on an html pop-up

I have recently created an HTML web resource that I am displaying when a ribbon button is clicked. Within this popup, there is a dropdown list that I intend to fill with records obtained through a fetchXml query. The issue I'm encountering is that de ...

javascripthtmldynamics-crm-2011

Tips on using Ajax to post in HTML

Here is the code I have been working on: <script type="text/javascript"> var xmlDoc; var xmlhttp; function loadRates() { xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = readRates; xmlhttp.open("GE ...

javascriptjqueryhtmlajax