How to set CSS for select and its dropdown menu when selected?

Question

I'm a backend developer, learning frontend, new to CSS.

Working on a project, have to set a default CSS for select tag. However on click over this tag border color is getting changed to blue from green and text color to black from green. Tried to find out CSS implementing on click however no use. All that is visible on inspect element is some event is active on select. Tried to add my own event on click and change CSS back, however not able to achieve it so.

CSS:

.customSelect {
    border-radius: 1.25rem;
    height: calc(5.25rem + 2px);
    font-size: 3rem;
    color: #00a082;
    border: 3px solid #cbece5;
}

Tried to add same class on custom click event, however something else is replacing my CSS.

JS:

$("#selectId").click( () => {
    $("#selectId").addClass('customSelect');
});

How to add custom CSS on select tag and also on its option drop-down menu?

EDIT Why not a duplicate for how-to-style-the-option-of-a-html-select

My question is not to style option tag, but to stop my select box from changing border color to blue like when we click on select or in input tag and by default these changes to blue. Like comment, question title, question body and answer box all changes border color to blue when clicked. I don't want that to happen.

Check this: https://stackoverflow.com/questions/3354979/styling-part-of-the-option-text bottom line: you cannot style ` — , Oct 03 '18 at 23:06
@HereticMonkey It's a different question, I'm not trying to add CSS to `option` tag. Please read question carefully, I'm asking for `select` tag and the `dropdown` menu for `select` not `options` — NAVIN, Oct 04 '18 at 04:02
@HereticMonkey I agree on this that dropdown is browser functionality and thus can t be changed, but that's not the only question. — NAVIN, Oct 04 '18 at 04:39
I read it, and you specifically talk about styling `select` and `option` elements. However, it appears, after your edit, that you're not talking about borders, but rather the `outline` property. That's done the same across all elements that are focusable: [How to remove the border highlight on an input text element](https://stackoverflow.com/q/1457849) — Heretic Monkey, Oct 04 '18 at 16:03

score 1 · Accepted Answer · answered Oct 07 '18 at 00:51

Figured it out. This blue color and click over input, select and textarea tag is due to bootstrap CSS. Removed the class form-control from select and added following class. Everything is working fine now.

CSS:

/* Customized Select Box */
.customSelect {
    background-color: #fff;
    background-clip: padding-box;
    border: 0.5rem solid #cbece5;
    border-radius: 1.25rem;
    color: #00a082;
    display: block;
    font-size: 2rem;
    height: 3.5rem;
    line-height: 1.5;
    padding: 0.25rem 0.75rem;
    width: 100%;
    transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
    transition-property: border-color, box-shadow;
    transition-duration: 0.15s, 0.15s;
    transition-timing-function: ease-in-out, ease-in-out;
    transition-delay: 0s, 0s;
}

score 0 · Answer 2 · edited Oct 04 '18 at 01:48

0

Sometimes it is hard to find some CSS, try to inspect an element with :active or :hover, etc., states:

edited Oct 04 '18 at 01:48

Rafael

7,605
13
31
46

answered Oct 03 '18 at 23:05

qiAlex

4,290
2
19
35

This is good to know. – Hassan Voyeau Oct 03 '18 at 23:12
1

Good to know or not, it has nothing to do with the question. – Lazar Ljubenović Oct 03 '18 at 23:18
This would be better suited as a comment on the question as it does not solve the issue at hand. – Jake Oct 03 '18 at 23:24
It does relate to the question. – Hassan Voyeau Oct 04 '18 at 00:51

score 0 · Answer 3 · answered Oct 03 '18 at 23:15

You may have to build one yourself, because accessing the individual elements of the select element is complicated. I hope someone can provide a better answer, but in case not: W3 Schools has a documented method that is pretty heavy.

https://www.w3schools.com/howto/howto_custom_select.asp

(Sorry about the link; edited)

score 0 · Answer 4 · answered Oct 03 '18 at 23:33

You can use a CSS pseudo class to assign different values to an element.

In your case you could use:

.customSelect:hover to assign styles upon hovering with the mouse.

.customSelect:active to assign styles after clicking on something.

.customSelect:focus to assign styles to elements targeted by the keyboard or activated by the mouse.

This would be a separate style to the original .customSelect like so:

.customSelect {
  border-radius: 1.25rem;
  height: calc(5.25rem + 2px);
  font-size: 3rem;
  color: #00a082;
  border: 3px solid #cbece5;
}

.customSelect:hover {
  new-styles: new value;
}

You can also chain these together:

.customSelect:hover, .customSelect:active {
  style-to-apply-to-both: value;
}

Learn more about selectors here: https://www.w3schools.com/cssref/sel_hover.asp

How to set CSS for select and its dropdown menu when selected?

4 Answers4