Is it possible to modify the color of a span element within a select dropdown?

Question

Is it possible to modify the color of a span element within a select dropdown?

Is there a way to change the color of a span to red within a select option in js fiddle? I am trying to modify the color of

<span class="myError">This is a required field.</span>

to red https://i.sstatic.net/nRF2c.png

select{
  color: green;
}
select option { color: black; }

select option .myError{
  color:red
}

<select >
 <option value="">Color:
 <span class="myError">This is a required field.</span>
 </option>
 
 <option value="17">Color: Midnight Blue</option>
 
 <option value="18">Color: Radar Red</option>
 
 </select>

javascript jquery html css

Answer 1

Answer №1

Check out this creative concept where an overlay is used above a select element with the help of mix-blend-mode, allowing for color change control through CSS variables.

$('select').change(function(){
   $(this).parent().attr('style','--color:'+$(this).find(':selected').data('color'));
})

.select {
  position: relative;
  display: inline-block;
  --color:red;
}

.select:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 1px;
  bottom: 1px;
  left: 40px;
  background: var(--color);
  mix-blend-mode: lighten;
}

select option {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <select>
 <option value="" disabled selected>Color: This is a required field. </option>
 
 <option value="17" data-color="blue">Color: Midnight Blue</option>
 
 <option value="18" data-color="pink">Color: Radar Red</option>
 
 </select>
</div>

Answer 2

Check out this creative concept where an overlay is used above a select element with the help of mix-blend-mode, allowing for color change control through CSS variables.

$('select').change(function(){
   $(this).parent().attr('style','--color:'+$(this).find(':selected').data('color'));
})

.select {
  position: relative;
  display: inline-block;
  --color:red;
}

.select:before {
  content: "";
  position: absolute;
  right: 20px;
  top: 1px;
  bottom: 1px;
  left: 40px;
  background: var(--color);
  mix-blend-mode: lighten;
}

select option {
  color: black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="select">
  <select>
 <option value="" disabled selected>Color: This is a required field. </option>
 
 <option value="17" data-color="blue">Color: Midnight Blue</option>
 
 <option value="18" data-color="pink">Color: Radar Red</option>
 
 </select>
</div>

Answer 3

Answer №2

Once the DOM has been rendered, take a closer look at the element and you'll notice that the span has been removed. This explains why the CSS styles are not being applied, as the .myError class or span element does not exist.

To put it simply, the option tag does not permit other tags within it.

Answer 4

Once the DOM has been rendered, take a closer look at the element and you'll notice that the span has been removed. This explains why the CSS styles are not being applied, as the .myError class or span element does not exist.

To put it simply, the option tag does not permit other tags within it.

Answer 5

Answer №3

If you want to style the options within a select tag, you cannot use an HTML tag inside the <option> tag. However, you can achieve the desired styling using CSS:

select{
  color: red;
}
select option { color: black; }

select option:first-child{
  color:red
}

.mid-blue{
  color: #0000CD;
}

.radar-red{
  color: #FF0000;
}

<select >
 <option value="">Color:This is a required field
 </option>
 
 <option class='mid-blue' value="17">Color: Midnight Blue</option>
 
 <option class='radar-red' value="18">Color: Radar Red</option>
 
 </select>

Answer 6

If you want to style the options within a select tag, you cannot use an HTML tag inside the <option> tag. However, you can achieve the desired styling using CSS:

select{
  color: red;
}
select option { color: black; }

select option:first-child{
  color:red
}

.mid-blue{
  color: #0000CD;
}

.radar-red{
  color: #FF0000;
}

<select >
 <option value="">Color:This is a required field
 </option>
 
 <option class='mid-blue' value="17">Color: Midnight Blue</option>
 
 <option class='radar-red' value="18">Color: Radar Red</option>
 
 </select>

Is it possible to modify the color of a span element within a select dropdown?

Answer №1

Answer №2

Answer №3

Similar questions

How can you inform TypeScript about a file that will be included using a script tag?

Confused by navigating with php

Is there a way to update an angular.js service object without using extend or copy?

Check the browser's developer tools to access JavaScript files

Exploring click event beyond React Component: Jest + Enzyme Testing

Using Jquery Functions within Codeigniter

Nuxt issue: Vue router push not reflecting query updates

Steps to troubleshoot the TypeError: cv.Mat is not a constructor in opencv.js issue

What is the process for obtaining the Rails response object within your code?

Is there a bug causing the Admin LTE content height issue? Looking for solutions to fix it

I'm having trouble getting my paragraph to center with both Bootstrap 4's margin:auto and text

What was the reason for Vue's decision to deprecate the ""is" attribute for HTML elements?

Modify the event from creating a table on click to loading it on the page onload

Exploring unit tests: Customizing an NGRX selector generated by entityAdapter.getSelectors()

The Angular 2 view will remain unchanged until the user interacts with a different input box

Is it necessary to specify a data type for the response when making an AJAX POST request?

Utilizing VueMq for personalized breakpoints and module inclusions

Issue with nextjs not returning the updated object correctly

Tips for adding text to your d3 force layout

Guide on transferring value from a <select> element using JavaScript