CODEWITHSUNDEEP
javascripthtmlcss
Szabolcs Horvath
Szabolcs Horvath

Reputation: 79

HTML select box customizing CSS for disabled selected

how can I customize a select box to show "disabled selected" value customized on page load/refresh, not only after option shown/selected.

<select>
  <option>Poland</option>
  <option>Germany</option>
  <option style="color:red" disabled selected>Choose</option>
</select>

I tried many CSS solutions, but non works on page loading / refresh. I also don't want to rebuild the whole select box by hiding the original. There is any workaround for it?

EDIT: a more closer approach for what i want is this one:

<select id="country" name="country" style="color:red" required>
    <option style="color:red" disabled selected>Choose</option>
    <option style="color:black">Germany</option>
    <option style="color:black">Poland</option>
</select>

but i would like to have the selected value to be displayed in it's color and only the disabled option to be showned in different color.

Upvotes: 1

Views: 505

Answers (6)

Nikita
Nikita

Reputation: 16

In css (hope you mean this)

option:disabled{
  color: red;
}

Upvotes: 0

Aifos Si Prahs
Aifos Si Prahs

Reputation: 363

If you want to have > 2 colors, you can use this JS below:

const select = document.querySelector('select[name="country"]#country');

const setColor = () => {
select.style.color = select.querySelectorAll('option')[select.selectedIndex].getAttribute('set-color');

}

setColor();

select.onchange = () => setColor();
option {
  color: black;
}
<select id="country" name="country" required>
    <option set-color="red" disabled selected value="">Choose</option>
    <option set-color="black" value="">Germany</option>
    <option set-color="green"
    value="">Poland</option>
</select>

Upvotes: 0

Aifos Si Prahs
Aifos Si Prahs

Reputation: 363

To make CSS work with :invalid pseudoselector when you have an option with "selected" (even if it's disabled), you should add value="" to each of your options, otherwise the value will fallback to the innerText of the option.

Is that what you want?

select {
  color: black;
}
select:invalid {
  color: red;
}
option {
  color: black;
}
<select id="country" name="country" required>
    <option value="" disabled selected>Choose</option>
    <option value="">Germany</option>
    <option value="">Poland</option>
</select>

Upvotes: 1

Aifos Si Prahs
Aifos Si Prahs

Reputation: 363

It looks like you're talking about removing that grey background for the option with "disabled" and "selected" when you just open the select on page load.

This code below removes the default browser-specific (blue in Chrome) background color from the HTML in the .

Is it what you want?

That's the only way to build it in a more "native" way with , instead of building custom lists to mock a .

You can play around with different styles, it's very customizable.

const optionsSelect = document.querySelector('select[name="options"]');
const options = optionsSelect.querySelectorAll('option');

optionsSelect.size = options.length;

const placeholderSelect = document.querySelector('input.placeholder-select');
optionsSelect.onchange = function ({target}) {
  placeholderSelect.value = options[target.selectedIndex].innerText;
}

options.forEach(() => {  optionsSelect.classList.toggle("focused");
});
placeholderSelect.onclick = function () {  optionsSelect.classList.toggle("focused");
}


document.body.addEventListener("click", function (e) {
if (["INPUT", "SELECT", "OPTION"].includes(e.target.tagName)) {
  return;
}
optionsSelect.classList.contains("focused") && optionsSelect.classList.remove("focused");
});
body {
  width: 100vw;
  height: 100vh;
}
select[name="options"].focused {
  display: block;
}
input.placeholder-select {
  appearance: none;
  outline: none;
  border-radius: 2px 2px 2px 2px;
  border: 1px solid #FDE3FF;
  padding: 6px;
}
.placeholder-select-wrapper:after {
  content: attr(label);
  color: black;
}
.custom-select-group {
flex-direction: column;
display: flex;
}
select:focus {
  outline: none;
}
select[name="options"] {
  display: none;
  overflow: hidden;
  border: none;
}
option:hover {
  box-shadow: 0 0 10px 100px #ffb7b7 inset;
}
option {
  border: green;
  padding: 6px;
  color: white;
  background-color: lightblue;
}
option:checked {
  box-shadow: 0 0 10px 100px lightpink inset;
}
<div class="custom-select-group">
     <input autofocus="off" value="Option 3" class="placeholder-select" />
  </select>
  
  <select size="3" name='options'>
  <option value='option-1' class="options">Option 1</option>
     <option value='option-2' class="options">Option 2</option>
     <option selected disabled value='option-3' class="options">Option 3</option>
  </select>  
</div>

This also refers to "Remove blue background from option in select HTML CSS JS JavaScript", "Custom styles for option in select"

Upvotes: 0

Darshil Jani
Darshil Jani

Reputation: 860

You can hide the option using the 'hidden' attribute. The 'Choose' option will be shown as the default/selected option on page load, but it will be hidden in the dropdown options and will not be shown/selectable from the options once the user selects any of the options .

<select>
  <option>Poland</option>
  <option>Germany</option>
  <option hidden selected>Choose</option>
</select>

Output: Output.

Upvotes: 0

Rafael
Rafael

Reputation: 9

If you want to do in simple way but not the better you can do something like this

option{
  color: black;
}
<select style="color: red">
  <option>Poland</option>
  <option>Germany</option>
  <option disabled selected>Choose</option>

Upvotes: 0

Related Questions