css Question posted in
Some basic documentation can be found here.

Css – how to style dropdown list (select tag) after I made a selection?

might be best explain with an example: say I want to change the border to red instead of black after I made a selection.

here’s the link to sample code: https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_select

on page load, the dropdown list has a "normal" border around it.

enter image description here

after I made a selection, the border-width seems to have doubled.

enter image description here

I thought the CSS might be a pseudo-class but looking at this list (https://developer.mozilla.org/en-US/docs/Web/CSS/Pseudo-classes), I cannot see anything that might be suitable.

Tags:

2

Answers


  1. 0

    To achieve the desired effect of changing the border color of a select element after a selection is made, you can use the :valid pseudo-class along with some CSS. Here’s an example:

    <!DOCTYPE html>
<html>
<head>
<style>
/* Default styles for the select element */
select {
  border: 2px solid black; /* Default border color */
  padding: 5px;
}

/* Style for the select element when it's valid (i.e., an option is selected) */
select:valid {
  border-color: red; /* Change border color to red when an option is selected */
}
</style>
</head>
<body>

<h1>The select element</h1>

<p>The select element is used to create a drop-down list.</p>

<form action="/action_page.php">
  <label for="cars">Choose a car:</label>
  <select name="cars" id="cars" required> <!-- Note the 'required' attribute to make the select element required -->
    <option value="">Select a car</option>
    <option value="volvo">Volvo</option>
    <option value="saab">Saab</option>
    <option value="opel">Opel</option>
    <option value="audi">Audi</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">
</form>

<p>Click the "Submit" button and the form-data will be sent to a page on the 
server called "action_page.php".</p>

</body>
</html>
    Login or Signup to reply.
  2. 0

    The style you’re seeing does not come as a direct consequence of having made a selection. You obviously have opened the select using a mouse or trackpad, otherwise (using the keyboard) you’d have noticed the style already before opening it.

    What you’re seeing is the focus styles of the select element.

    To change it, use e.g. this CSS:

    select:focus {
  outline: 1px solid cyan;
}
    <select name="cars" id="cars">
  <option value="volvo">Volvo</option>
  <option value="saab">Saab</option>
  <option value="opel">Opel</option>
  <option value="audi">Audi</option>
</select>

    If you really want a different styling based on the user having made a selection, you’ll either need JavaScript to detect a "dirty" state, or modify the markup in ways probably not intended like suggested in the other answer.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search