Is it possible to make the "Select Month" placeholder text red while keeping the options in black? I am currently using the hidden attribute as part of my JavaScript functionality. The goal is to only change the color of the default placeholder value.
<select class="form-control">
<option value="" hidden="" style="color: red;">Select Month</option>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
</select>
To change the color to red using CSS, simply add color: red to the style property. If you need to revert back to the original color when a different value is selected, utilize the JavaScript code snippet below!
var target = document.getElementById('test');
target.addEventListener('change', () => {
target.classList.add("selected");
});select.form-control {
color: red;
}
select.form-control.selected {
color: black;
}
select.form-control option {
color: black;
}<select class="form-control" id="test">
<option value="" hidden>Select Month</option>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
</select>If you're looking to change the color of options, using color: red; directly won't work.
The proper way to achieve this is by utilizing the :invalid option and making sure your <select> is marked as required.
Check out this code snippet:
select.form-control option{
color: black;
}
select.form-control:invalid {
color: red;
}<select class="form-control" required>
<option value="" hidden="">Select Month</option>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
</select>Note that by setting it as required, the <select> becomes mandatory. If this doesn't align with your requirements, consider using a jQuery solution instead:
Solution 2
$(".form-control").change(function(){
var x = $( ".form-control option:selected" ).val();
if(x!="") {
$("select").css("color","black");
} else {
$("select").css("color","red");
}
});select {
color: red;
}
option {
color: black;
}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class="form-control">
<option value="" hidden="">Select Month</option>
<option value="JAN">JAN</option>
<option value="FEB">FEB</option>
<option value="MAR">MAR</option>
</select>This alternative approach allows you to modify the color without enforcing a required field constraint.
I currently have two date input fields labeled as Start Date and End Date for a specific Project. If the user chooses a start date that is earlier than today's date but does not choose an EndDate, I want to indicate that the project is ongoing. How c ...
I'm looking to make some changes to the "categories" block in my left navigation column. Currently, it appears like this: https://i.sstatic.net/MpUD5.png I would like it to look like this by default: https://i.sstatic.net/fJTr8.png Here are the mod ...
I am venturing into the world of web scraping for the first time using VBA. My goal is to extract pricing information from our company's distributors and save it in an Excel file for our sales team to analyze. The process involves taking the URL from ...
Is there a way to remove the padding around the container and between the two columns? I attempted setting margin and padding to 0, but it was not successful. https://i.sstatic.net/i5XJJ.jpg body, html { width: 100%; height: 100%; } main { disp ...
I'm facing an issue with displaying an icon on my website. Here is the current setup in my code: app.js const http = require('http'); const fs = require('fs'); const express = require('express') const path = require(&apo ...
I am currently utilizing Angular Material Design to develop a website, but I am encountering an issue where I am unable to open the home section of the side bar. Can anyone provide me with a solution or suggestion to resolve this issue? https://stackblitz. ...
I am working on a code that dynamically adds fields to a form, you can see it in action on this jsFiddle. My question is, is there a way to keep the newly added fields even after the form is submitted and the user returns to the page? I'm not looking ...
My image is currently animating along a path, but I want to make the path itself visible. Here's the CSS code: div { width:10px; height:10px; background:red; position:relative; -webkit-animation-name:Player1; -webkit-animatio ...
When working with Django framework and python scripts to validate XML files, my usual approach involves parsing the XML file located at a specified location using the following code: import xml.etree.ElementTree as ET tree = ET.parse('config.xml&apos ...
My current border has a vertical flow like this: https://i.sstatic.net/CdUm6.png (source: gyazo.com) However, I want the content to flow horizontally from left to right instead of top to bottom. When I apply float: left; to the controlling div, it resu ...
I am trying to use a button to expand my sidenav by toggling the class with JQuery. Although I am more familiar with JavaScript, I attempted to solve it with JS before moving to JQuery. function toggleMenu() { var sideEle = document.getElementByI ...
Looking for help with my website: I made some changes in the code using Firebug and identified these elements that I want to modify (but changes are not live yet) The following code represents the elements on my site: This is the HTML code: <di ...
I'm working on a program that displays two different prices depending on whether the user is registered or not. Registered users will see both the normal price and the discounted price, while unregistered users will only see the normal price. I need t ...
Thank you for the assistance, I believe this issue should be an easy fix. I have added a custom :focus style to my input that removes the default outline and adds a box shadow and border. However, when the input field is focused, the submit button located ...
My latest project involved using iText 5 to generate a visually appealing report complete with tables and graphs. Now I'm curious to know if iText also has the capability to convert PDF files into HTML format. If it does, how would one go about doing ...
The image above the footer is not displaying properly. Screenshot: Image appears below the footer https://i.stack.imgur.com/RvSqI.png Source Code .footer-area { background-position: center; position: relative; z-index: 5; } .footer-area::before { ...
Struggling to customize the CSS style of my Caldera forms on a WordPress site. My goal is to add a hover effect to the radio checklist fields. Currently, I've only managed to style the bullets and need help adding a hover effect to the fields themselv ...
I have a set of 5 image buttons, each meant to trigger different content within a div. When the page loads, there should be default content displayed in the div that gets replaced by the content of the button clicked. The previously displayed content shoul ...
I'm struggling to make my audio-player resize properly to fit the full width of my page. I can't seem to figure out what I'm missing or doing wrong... (Current Look) https://i.sstatic.net/tEtqA.png I'm attempting to utilize HTML cust ...
Presently, I am facing the following scenario. http://jsfiddle.net/ef7vh/1/ </p> <pre> <div> <button>Button1</button> <span style="border: solid 1px black; padding: 0px 10px 0px 10px">My Text</span> < ...