11

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:

Enter image description here

Here's what I'm trying to do:

Enter image description here

TO

Enter image description here

How can it be done? Is there a way?

8
  • 1
    Possible duplicate of Change textbox highlight color Commented Jun 29, 2017 at 12:51
  • 1
    @jimboweb It's not the same thing. The post talk about the border focus color but here i'm talking about the text highlight color Commented Jun 29, 2017 at 12:52
  • Just use background-color. Not that hard to figure it out Commented Jun 29, 2017 at 12:53
  • Okay, then try here: stackoverflow.com/questions/2258647/… Commented Jun 29, 2017 at 12:53
  • 3
    You are required to post a minimal example of the markup that shows the problem here. stackoverflow.com/help/mcve Commented Jun 29, 2017 at 13:15

3 Answers 3

26

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;
}
Sign up to request clarification or add additional context in comments.

1 Comment

You don't want to change the color to the same color as the background-color, do you?
-2

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>

1 Comment

This doesn't answer the question. He's trying to style the date input and your solution doesn't work on that type of input.
-3

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;
}

1 Comment

This doesn't answer the question. He's trying to style the date input and your solution doesn't work on that type of input.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.