CODEWITHSUNDEEP
htmlcss
mesllo
mesllo

Reputation: 583

How to underline date/time <input> value using HTML/CSS?

I am trying to underline an <input type="date"> field using style="text-decoration: underline;" but it doesn't seem to work. Is there another way to underline the set date value? I would also like to apply this for time.

NOTE I am able to apply font-weight and color properties to these inputs but not text-decoration

EDIT

It seems the above is not a sufficient explanation of what I am trying to achieve.

Basically:

<input type="date"> will yield 15-02-17

I am trying something like:

<input type="date" style="text-decoration: underline;"> to yield an underlined 15-02-17

But this does not work. Is there another way?

ANOTHER EDIT

Preferably the solution should be generalized to all browsers.

Upvotes: 3

Views: 2238

Answers (3)

milt_on
milt_on

Reputation: 527

Put this code in the CSS.

input::-webkit-datetime-edit-fields-wrapper {
    text-decoration:underline;
}

The date tag consists of different div and span tags, which are enveloped by input::-webkit-datetime-edit-fields-wrapper in Chrome

EDIT : Example date input tag in Chrome

DOM: Example date input tag in Chrome

Upvotes: 3

sol
sol

Reputation: 22949

I'm not sure you can style <input type="date"> with text-decoration.

Not the nicest solution, but you could manually add an underline..

.wrap {
  position: relative;
  display: inline-block;
}
.wrap:after {
  content: '';
  position: absolute;
  bottom: 2px;
  left: 4px;
  height: 1px;
  width: 54%;
  background: red;
}
<div class="wrap">
  <input type="date">
</div>

CODEPEN

Note that you can't add pseudoelement to input, so you'll have to position it relative to something else.

Upvotes: 2

Gabriel
Gabriel

Reputation: 418

I'm affraid the visualization of html5 inputs is browser-specific (kinda like fieldsets), thats why text-decoration: underline; won't work. You will likely run into issues too when trying to style the calendar it is showing.

I think your best bet is to use a plugin. There are plenty ot there, ie: https://github.com/fengyuanchen/datepicker

Also, you can edit your question and ask for the specific browser you want to do this, I'm sure we can find out the style needed.

Upvotes: 1

Related Questions