This question extends on making input fields styled when they contain values
I have gone with David Thomas' suggestion of using CSS only to do this for text entry fields and it works really well. I have included his solution in my code for info.
Now, I would like to extend the same idea for select lists.
I have this code, which isn't working as expected:
.field-required
{border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}
.field-required:placeholder-shown
{border: 2px solid #023a64;background-color: #d0e9f1;}
.list-required
{border: 1px solid #888;background-color: white;width: 75%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}
.list-required option[value="Select"]
{border: 2px solid #023a64;background-color: #d0e9f1;width: 100%;border-radius: 6px;padding: 4px 8px;color: #232856;text-align: left;font-size: 16px;height: 40px;}<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data">
<label for="field">Text Field:</label><br>
<input class="field-required" type="text" name="field" id="field" placeholder="Enter text …"><br><br>
<label for="list">Select …</label><br>
<select id="list" name="list" class="list-required">
<option value="Select" selected>Select …</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select><br>
</form>I've added required into the Select tag and I've added disabled attribute into the first option. in CSS I've added the select:required:invalid that is change the background into light blue and I also hide the first option
.field-required {
border: 1px solid #888;
background-color: white;
width: 75%;
border-radius: 6px;
padding: 4px 8px;
color: #232856;
text-align: left;
font-size: 16px;
height: 40px;
}
.field-required:placeholder-shown {
border: 2px solid #023a64;
background-color: #d0e9f1;
}
.list-required {
border: 1px solid #888;
background-color: white;
width: 75%;
border-radius: 6px;
padding: 4px 8px;
color: #232856;
text-align: left;
font-size: 16px;
height: 40px;
}
select:required:invalid {
border: 2px solid #023a64;
background-color: #d0e9f1;
width: 100%;
border-radius: 6px;
padding: 4px 8px;
color: #232856;
text-align: left;
font-size: 16px;
height: 40px;
}
option[value=""][disabled] {
display: none;
}
option {
color: #232856;
background-color: white;
}<form method="post" action="xxx.php" enctype="multipart/form-data" value="multipart/form-data">
<label for="field">Text Field:</label><br>
<input class="field-required" type="text" name="field" id="field" placeholder="Enter text …"><br><br>
<label for="list">Select …</label><br>
<select id="list" name="list" class="list-required" required>
<option value="" disabled selected>Select …</option>
<option value="Item 1">Item 1</option>
<option value="Item 2">Item 2</option>
</select><br>
</form>