Question 42623 in Html Question posted in
Some basic documentation can be found here.

How do I change the placeholder option of select in HTML and CSS?

I’m trying to change the color of the select option which has the value of "".

This is the HTML I have:

<select id="kategorija" name="kategorija"></select>

This is the CSS I have:

select {
    border-radius: 5px;
    height: 45px;
    background-color: #f6f6f6;
    border-width: 0;
    text-indent: 10px; 
}

select:invalid {
  color: green;
}

I’ve tried multiple options found here but none seem to be working.

Also, is there a way to put padding around the arrow of the select option?

Tags:

2

Answers


  1. 0

    maybe what you mean is this
    visit : https://www.w3schools.com/cssref/sel_invalid.php

    <!DOCTYPE html>
<html>
<head>
<style>
input:invalid {
  border: 2px solid red;
}
</style>
</head>
<body>

<h1>Demo of the :invalid selector</h1>

<input type="email" value="supportEmail"><br/><br/>
<input type="email" value="[email protected]">
<p>Try typing a legal e-mail address, to see the styling disappear.</p>
</body>
</html>
    Login or Signup to reply.
  2. 0

    We’re not styling an <option> here, we are conditionally styling the <select> itself. And if you set the text color to green when there is no text displayed, you won’t see any change. Suggest you start by styling the border when the select is :invalid, and then go from there. And remember, for this to work, the select needs the required attribute in order for a blank option to be considered invalid.

    select {
  border-radius: 5px;
  background-color: #f6f6f6;
  border: 2px solid #e6e6e6;
  padding: 6px 8px;
}

select:invalid {
  border: 2px dashed red;
}

/* This is just to make the validation more visible.
   Don't disable all focus styles in a production application. */
select:focus {
  outline: none;
}
    <select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
<select required>
  <option></option>
  <option>One</option>
  <option>Two</option>
  <option>Three</option>
</select>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search