How to change select menu background color after selected any option| not option color

change background color of select option on hover
bootstrap-select option background-color
change text color of selected option in a select box css
selected option background-color
change default select option color
css select option selected background color
change background color of select option using javascript
how to change select box option:hover ( background color in chrome)

i have select option list in my side panel and i just want to change select background color if the user selected any option. I don't want to change option colors. Simply i want to make as if user select any option, apply mouse hover color to background.

to

.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
    <option value="1" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>

If js is allowed, try this.

$('#countrySelect').change(function() {
  if ($(this).val()) $(this).css('background', 'red');
  else $(this).css('background', '#e9ece5');
})
.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
.nav-country-select option{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
    <option value="" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>

Background color of selected option, How do I change the background color of a selection? i put hover for menu items.select one menu item after change the background of selected item color as hover color.

Add onchange to the select;

.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" onchange="this.style.background = 'gray'" autocomplete="off">
    <option value="1" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>

css How to change colour of blue highlight on select box dropdown , How do I change the color of a selection in CSS? Posted by Simon January 23, 2014 November 16, 2019 12 Comments on CSS trick: Setting background color of a selected HTML option element Update 02.02.2018 : As noted by Tom this now only works when the attribute multiple is set.

Use Jquery.

    $("#countrySelect").change(function()
    {
     $(".nav-country-select").css("background-color","#2b67c6");

    });
    .nav-country-select {
      background-color: #e9ece5;
      font-family: Arial, Times, serif;
      color: #333333;
      height: 35px;
      border: 1px solid #bbbcbc;
    }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<li>
          <label class="label nav-label">Country</label>
          <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
            <option value="1" selected>Doesn't Matter</option>
            <option value="3">Australia</option>
            <option value="4">New Zealand</option>
            <option value="5">Middle East</option>
            <option value="6">UK</option>
            <option value="7">USA</option>
            <option value="8">Canada</option>
            <option value="9">India</option>
            <option value="10">Other</option>
          </select>
        </li>

How do I change the background color of an option tag in HTML? The selected color Blue behaviour comes with the browser and you cannot change it. With a little help of javascript, you can set the background color. But you may not be able to see it because it overrides again with the select color.

$('#countrySelect').change(function() {
  if ($(this).val()) $(this).css('background', 'red');
  else $(this).css('background', '#e9ece5');
})
.nav-country-select:hover {
  border: 1px solid #999;
  background-color: #ced0cf;
}
.nav-country-select:focus {
  outline: none !important;
}
.nav-country-select {
  background-color: #e9ece5;
  font-family: Arial, Times, serif;
  color: #333333;
  height: 35px;
  border: 1px solid #bbbcbc;
}
.nav-country-select option{
background-color: #fff;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<li>
  <label class="label nav-label">Country</label>
  <select class="btn nav-country-select" id="countrySelect" autocomplete="off">
    <option value="" selected>Doesn't Matter</option>
    <option value="3">Australia</option>
    <option value="4">New Zealand</option>
    <option value="5">Middle East</option>
    <option value="6">UK</option>
    <option value="7">USA</option>
    <option value="8">Canada</option>
    <option value="9">India</option>
    <option value="10">Other</option>
  </select>
</li>

How do I change the color of blue highlight on select box dropdown? 1. Right click the sheet tab you want to change the highlighted color of the selected range, and click View Code from the right-clicking menu. 2. In the Microsoft Visual Basic for Applications window, please copy and paste the below VBA code into the Code window. VBA code: change the highlighted color of selected range

You can just add a different background color to option elements so everytime it looks like if some option is selected , select element will have a different color

select>option{
 background-color: #ced0cf;
}

You need to put background-color on the option tag and not the select tag select option { margin: 40px; background: rgba(0, 0, 0, 0.3); color: #fff; text-​shadow: 0  Well organized and easy to understand Web building tutorials with lots of examples of how to use HTML, CSS, JavaScript, SQL, PHP, Python, Bootstrap, Java and XML.

How to change select menu background color after selected any option| not option color. i have select option list in my side panel and i just want to change  You can change the background color and color of selected text by styling ::selection. Styling this pseudo element is great for matching user-selected text to your sites color scheme. Styling this pseudo element is great for matching user-selected text to your sites color scheme.

I would like to change the attributes of the drop down. Thank you for any help! Options (attributes of the dropdown) of an html “select” element can select option { background-color: green; font-weight: bold; color: red; } You can add it into the Header after disabling HTML editor on th Advanced tab: There are ways to change the highlight color in Firefox, by adding a box-shadow to the CSS for option:hover but this is browser-specific. Unfortunately your best option is probably replacing the &lt;select&gt; box entirely via some pseudo-construct, if it is essential to you that you override the browser defaults.

As such, option can represent menu items in popups and other lists of attribute is not set, only one single <option> of this <select> element may the value to be submitted with the form, should this option be selected. to <option> elements again, using the color and background-color CSS properties. This works with older version of Firefox but our users have discovered that the latest version, 49.0.1, ignores the styles for the <option> elements; in the example above all of the lines in the dropdown list for the <select> element have the same default background and color.

Comments
  • You want to check if the user selected an element of this Dropdown and change the color forever while he's on this site?
  • @PatrickMlr yes.. there are many select items in side panel.