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

The outline color cannot be removed from vue-carousel

I recently downloaded the Vue Carousel library and here is the version I am using: "vue": "^2.6.11", "vue-carousel": "^0.18.0", When I click on the pagination, a focus effect is added to the element with an outlin ...

javascriptcssvue.jscarousel

Is it possible to adjust the color of a pseudo class to align with the color of a different class?

Creating a unique 'block' element on a webpage named 'test-div' has been quite the challenge. Adding an additional class to test-div changes the background color, such as: test-div test-div-bg-bright-gold test-div test-div-bg-dark-blu ...

csspseudo-class

Tips for organizing a div into a dock panel

I am seeking guidance on how to align and resize the following divs based on my specific requirements outlined below. Area A Area A should remain at the top with a set height that will not change. Area B The height of Area B should vary between 0 and a m ...

jqueryhtmlcss

Resolving Issues in HTML and the Dynamic Duo of PHP and MySQL

Hey there, I've been a reader for a while now but this is my first time posting. I'm really into PHP and I've been working on a page lately. Right now, I've got the DB connection set up nicely and my SELECT statement is doing exactly wh ...

phphtmlmysqlformspost

React-Native-Web generates default classes for inline styles and erroneously applies them in a jumbled sequence

Currently working on a project involving react native web and NextJS. I have encountered an issue with inline styles in React that seems to be caused by RN-Web. It appears that there is a mechanism within the framework that automatically generates classes ...

cssreact-nativenext.jsreact-native-web

Is it possible to transform all scripts into a React component? (LuckyOrange)

I am currently working on converting the script for a specific service (http://luckyorange.com/) into a component. The instructions say to place it in index.html within the public folder, but that appears to be insecure. I'm uncertain whether this tas ...

javascripthtmlreactjs

How does using position: fixed affect width in React components?

Can someone explain why my sidebar width is reduced when I apply position: fixed? Here is the code snippet: https://codesandbox.io/s/1yr3nlqp74 Steps to reproduce the bug: Open the code in a new window (full screen) Observe the picture before and after ...

reactjscssreact-reduxmaterial-ui

Solving the issue of overflowing in the animation on scroll library

I've recently started using a fantastic library called animation on scroll (aos) for my web development projects. This library offers stunning and visually appealing animations. However, I encountered an issue where it causes overflow problems in my H ...

javascripthtmlcssanimationcss-animations

Tips for eliminating the flash of color upon website loading

Every time I visit my site at , there's a brief moment of grey before the site fully loads. Despite being a simple landing page, it seems to be taking longer than expected to load. I suspect this issue is caused by the combination of linear gradients ...

htmlcsslinear-gradients

A problem arose with Vitest when attempting to call the tRPC createCaller function due to the presence of incorrect JS syntax within the content. To resolve this issue, it is recommended to include

Currently, I am in the process of writing unit tests with Vitest and utilizing the tRPC createCaller to simulate the trpc context. However, I am encountering a failure during testing which presents the following error message: Error: Failed to parse sourc ...

htmlnext.jsmockingvitesttrpc

Setting a fixed data value within a div for subsequent retrieval through a function

I found a helpful example that demonstrates how to convert numbers into words. You can check it out here. The function for converting numbers into words is implemented in the following HTML code: <input type="text" name="number" placeholder="Number OR ...

javascriptjqueryhtml

Looking to retrieve the value of an input element within an ng-select in Angular 6?

Currently, I am working on a project where I aim to develop a customized feature in ng-select. This feature will enable the text entered in ng-select to be appended to the binding item and included as part of the multiselect function. If you want to see a ...

javascripthtmlangulartypescriptangular-ngselect

In the process of transforming my JavaScript code into JQuery

I'm struggling to convert my JavaScript code into jQuery, especially when it comes to calling the function for radio elements by name. The original JavaScript works fine, but I can't seem to get the jQuery version to work correctly. Index HTML ...

javascriptjqueryhtml

CSS inset box-shadow creates a gap between collapsed borders

I need help with a strange issue I'm facing. I have a table where border-collapse is set to collapse, and there's an unusual gap between the box-shadow inset and the border. The size of this gap increases as the border width gets larger. How can ...

htmlcss

Adding a class to an element can be easily achieved when both input fields have values

Is it possible to apply the "active" class to the element go_back_right only when both inputs with classes search_box_name and search_box_id have content in them? I've tried looking for solutions on this platform, but being new to JavaScript, I couldn ...

javascripthtmljquerycss

Issue with parameter functionality not working as expected

This code snippet is not functioning as expected. I am trying to extract and print the values from the URL parameter file:///C:/Users/laddi/Desktop/new%201.html?t=vindu&b=thind function GetURLParameterValue(param) { var pageURL = window. ...

javascripthtmlparameters

Trouble obtaining AJAX result using onClick event

As a newbie to AJAX, I am still trying to grasp the concept. My task involves using an AJAX call to extract specified information from an XML file. Even after carefully parsing all tag elements into my JavaScript code, I encounter a problem when attempting ...

javascripthtmlcssajax

What determines the root element of the CSSOM (CSS Object Model)?

As I dive into my research on browser rendering, I've reached the stage in the rendering process where the browser creates the CSSOM from raw CSS. In many tutorials I've encountered, the authors confidently state that the body element is the roo ...

cssdomcssom

Elements with fixed positions in CSS overlapping one another

Hey there, I'm working on a navigation bar and using Jquery to resize elements for better website aesthetics. Instead of a traditional horizontal list, each button is created individually with images: <a href="#" class="button" id="home"><im ...

css

In the Firefox browser, tables are shown with left alignment

I recently designed a responsive HTML newsletter with all images neatly wrapped in tables. My goal was to ensure that on smaller screens, the tables stack on top of each other for better readability, while on wider displays, they appear side by side in a r ...

htmlcssemail