Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

how to change color of selected numbers in input[type=time]

i have this css to change the text selection color which works great:

::selection {
  background: #e4d2ba;
}

custom text select color in the word Time

but how can i change the color of the selection of numbers in this time input?

time input numbers still selected in default color

these dont seem to work for me:

input::selection {
  background: #e4d2ba;
}
input[type=time]::selection {
  background: #e4d2ba;
}

UPDATE: (regarding possible duplicate) this post has a lot of information on styling time inputs, but nothing on changing the selection color

like image 986
stuart Avatar asked Oct 17 '25 00:10

stuart


1 Answers

this works:

input[type=time]::-webkit-datetime-edit-hour-field:focus,
input[type=time]::-webkit-datetime-edit-minute-field:focus,
input[type=time]::-webkit-datetime-edit-second-field:focus,
input[type=time]::-webkit-datetime-edit-ampm-field:focus {
  background-color: #e4d2ba;
}

changed selected numbers via webkit field focus background color

my confusion was based on assuming the numbers were in a selection state since it looked like the same color as default selected text to me. but actually it's the background color of each whole field when focused. which was also surprising since i had assumed the whole combined time field held the focus due to the default blue border

like image 150
stuart Avatar answered Oct 19 '25 12:10

stuart