HTML code to set the background color of a selection box

Question

HTML code to set the background color of a selection box

Here is an image that relates to my query.

I have created a select box in HTML that contains colors, as shown in the image above and the code below. By using CSS, I have applied classes to color various option elements, but how do I ensure that the selected items are also displayed in their respective colors?

In the image, red is currently selected, yet the background of the selected item remains white. Furthermore, is there a method to remove the hover effect? For instance, when hovering over the orange item, it is highlighted in blue. (Please note that JavaScript and jQuery are used to populate the selector after clicking a button.)

<div class="selection">
    <select id="color">
        <option class="selectionpurple" value="purple">purple</option>
        <option class="selectionblue" value="blue">blue</option>
        <option class="selectionred" value="red">red</option>
        <option class="selectiongreen" value="green">green</option>
        <option class="selectionorange" value="orange">orange</option>
    </select>
</div>

javascript jquery html css

Answer 1

Answer №1

Utilizing the jquery change() function is an effective way to accomplish this task. The change() function is triggered each time an option is selected. By extracting the value of the selected option and utilizing the jquery css() function, you can apply the chosen style to the select element.

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

Answer 2

Utilizing the jquery change() function is an effective way to accomplish this task. The change() function is triggered each time an option is selected. By extracting the value of the selected option and utilizing the jquery css() function, you can apply the chosen style to the select element.

var selected = $("select option:selected").val();
$('select').css('backgroundColor', selected);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

Answer 3

Answer №2

const chosenColor = $("select option:selected").val();
$('select').css('backgroundColor', chosenColor);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

Answer 4

const chosenColor = $("select option:selected").val();
$('select').css('backgroundColor', chosenColor);

$( "select" ).change(function () {
    console.log($(this).val());
    $('select').css('backgroundColor', $(this).val())
})

.red {
background-color : red;
}
.blue {
background-color : blue;
}
.green {
background-color : green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select name="text"> 
  <option value="red" class="red" selected>red</option> 
  <option value="blue" class="blue">blue</option>
  <option value="green" class="green">green</option>
</select>

HTML code to set the background color of a selection box

Answer №1

Answer №2

Similar questions

Difficulty with JQuery click event not targeting anchor element in Firefox browser

Tips for utilizing a protractor ExpectedCondition by hand

The Datalist HTML does not function properly with line breaks

Issues arise when attempting to make the background image in Bootstrap collapse responsive

Getting the values of $scope variables from AngularJS in the controller to the view

Determine whether the parsed JSON item string exceeds a certain number

The json_encode function in PHP seems to be unexpectedly adding additional square brackets

Place a Three.js scene within a jQuery modal dialogue box

Tips for maintaining sequential numbering in Mediawiki sections

Click on the button to convert the content of the text area into a variable

Ensuring data is saved on multiple forms using ui-router in AngularJS

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

Learn how to utilize ng-class to assign an ID selector to HTML elements

Is jQuery returning null because the selected option is not being posted correctly?

Enhancing xhtml with rich snippets and incorporating microdata for game data

The functionality of the Bootstrap toggle button seems to be malfunctioning

Determining light sources for unique shapes using Three.js

How to capture a change event in a dynamically loaded element using JQuery

Hide the Popup once the data has been successfully submitted to the server

Arranging JSON array elements in order