I have an input of type date in my page and I want to change the color of the highlight inside of it. I don't know if there are CSS selectors for that.
Here's an image of what I'm talking about:
Here's what I'm trying to do:
TO
How can it be done? Is there a way?
Credit to dboskovic on the Zurb GitHub repository:
input::-webkit-datetime-edit-day-field:focus, input::-webkit-datetime-edit-month-field:focus, input::-webkit-datetime-edit-year-field:focus { background-color: red; color: white; outline: none; }
I made my date input as text box so ::selection can work on it. This works for me in Chrome and Edge, but I noticed when combined with -moz in the same statement it stops working.
<style>
#myInput {
color: rgb(0, 255, 144);
}
#myInput::selection {
background-color: rgba(248, 90, 192, 0.56);
}
#myInput::-moz-selection {
background-color: rgba(248, 90, 192, 0.56);
}
</style>
<div class="row">
<input type="text" id="myInput" value="Test input text" />
</div>
This might be helpful. I changed the following CSS entry in bootstrap.css:
textarea:focus,
input[type="text"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
.uneditable-input:focus {
border-color: rgba(126, 239, 104, 0.8);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.075) inset, 0 0 8px rgba(126, 239, 104, 0.6);
outline: 0 none;
}