How to show astrisk in select box option?

Question

I want to know if there is any way to add asterisk after first option of select element?

Here is my html

<select class="form-control textyformcontrol">
   <option selected>Service area</option>
   <option>First Option</option>
   <option>Second Option</option>
   <option>Third Option</option>
</select>

Here is css

.textyformcontrol {
    outline: none !important;
    box-shadow: none !important;
    border: none !important;
    border-bottom: 1px solid #fff !important;
    background: transparent;
    border-radius: 0px;
    color: #fff;
    font-size: 16px;
    padding: 10px 0px;
    word-spacing: 2px;
    height: auto;
}

All the options are having default white color.Thus how to add asterisk in red color through css?

use
between the asterisk and create a class inside the p where in the text are color red. — Earvin Nill Castillo, Mar 03 '17 at 06:32
Unfortunately that doesn't work as all the options have global #fff color — Shashank Bhatt, Mar 03 '17 at 06:35
This post recommends using Select2: http://stackoverflow.com/questions/5887133/how-to-style-a-select-tags-option-element If you really want to customize your selects and options, I would go with that library. — Ralph David Abernathy, Mar 03 '17 at 18:50

score 0 · Answer 1 · answered Mar 03 '17 at 06:40

0

The following solution adds a red asterisk to each option element that does not have the selected attribute:

.textyformcontrol option[selected]:after {
  content: "";
}

.textyformcontrol option:after {
  content: "*";
  color: red;
}

Please see my demo here.

answered Mar 03 '17 at 06:40

Ralph David Abernathy

4,879
9
47
72

It is still all white, even with the other options – Carl Binalla Mar 03 '17 at 06:41
He is asking to make the asterisks red, which they are. – Ralph David Abernathy Mar 03 '17 at 06:42
I mean even the asterisk is still red in my view. – Carl Binalla Mar 03 '17 at 06:46
Yes, the OP has asked for the asterisk to be red. – Ralph David Abernathy Mar 03 '17 at 06:50
It was supposed to be white, not red, typo – Carl Binalla Mar 03 '17 at 06:55

How to show astrisk in select box option?

1 Answers1