Html Css change Date input highlight color

Question

I have an input of type date in my page and I want to change the color of the highlight inside of it and I don't know if there are css selector for that.

Here's an image of what i'm talking about :

Thank you for your concerned! :)

EDIT

here's what i'm trying to do:

TO

Possible duplicate of [Change textbox highlight color](https://stackoverflow.com/questions/37095442/change-textbox-highlight-color) — jimboweb, Jun 29 '17 at 12:51
@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 — alexandre, Jun 29 '17 at 12:52
Okay, then try here: https://stackoverflow.com/questions/2258647/changing-the-highlight-color-when-selecting-text-in-an-html-text-input — jimboweb, Jun 29 '17 at 12:53
You are required to post a minimal example of the markup that shows the problem here. https://stackoverflow.com/help/mcve — Rob, Jun 29 '17 at 13:15
try adding something like this to your question, so that others could understand you better. https://jsfiddle.net/suunyz3e/1442/ — omer, Jun 29 '17 at 13:18

Simon Juhl · Accepted Answer · 2018-09-21T21:27:43.800

16

If I find a 'non-webkit' solution I will update this.

Credit to dboskovic on the Zurb GitHub repo:

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

edited Sep 21 '18 at 21:27

answered Sep 20 '18 at 20:01

Simon Juhl

176
2
5

1

You don't want to change the color to the same color as the background-color, do you? – dmikester1 Sep 20 '18 at 21:25

score 0 · Answer 2 · answered Jun 29 '17 at 13:04

it might be helpful,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;
}

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. — Dayron Gallardo, Sep 20 '18 at 20:16

score -1 · Answer 3 · answered Jun 29 '17 at 13:41

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 doesn't answer the question. He's trying to style the date input and your solution doesn't work on that type of input. — Dayron Gallardo, Sep 20 '18 at 20:19

Html Css change Date input highlight color

3 Answers3