3

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.

mesllo
  • 545
  • 7
  • 29
  • 1
    Please share what you have tried till now – Saurabh Sharma Feb 15 '17 at 10:44
  • It seems to work, tested on chrome, ff, and safari. https://jsfiddle.net/sb45dcjd/ – Jonas Grumann Feb 15 '17 at 10:46
  • works also with FF and Opera ... Can you clarify your question with an example that demonstrate your issue ? – G-Cyrillus Feb 15 '17 at 10:49
  • OP asked to style DATE -- doesn't work: https://jsfiddle.net/sol_b/h16bxftv/ – sol Feb 15 '17 at 10:51
  • @SaurabhSharma I just said that I tried using `style="text-decoration: underline;"` in the `` tag. @JonasGiuro Yes I've already tested for `type="text"`, I would like to apply the same thing to `type="date"` – mesllo Feb 15 '17 at 10:51
  • `input[type="date"] {/*style here */}` ? ... clarify your question please – G-Cyrillus Feb 15 '17 at 10:52
  • @GCyrillus https://jsfiddle.net/sol_b/onycfqo2/ -- also doesn't work – sol Feb 15 '17 at 10:53
  • 1
    Ah ok - then you need something [like this](https://jsfiddle.net/h16bxftv/1/) - from http://stackoverflow.com/questions/14946091/are-there-any-style-options-for-the-html5-date-picker – Pete Feb 15 '17 at 10:55

3 Answers3

3

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

milt_on
  • 527
  • 1
  • 9
  • 20
  • 1
    @ovokuro but works fine for opera and IE11 (styling form elements is always failing here or there, ... you need to let it go at one point. ) – G-Cyrillus Feb 15 '17 at 11:09
  • @ovokuro no problem (Edge doesn't use the WebKit engine, which is why the solution doesn't work for it). Well, now it's just needed to find out how the wrapper is called in Edge. – milt_on Feb 15 '17 at 11:21
  • 2
    Preferably but not strictly across all browsers. The solution will mainly be used in a Cordova Webview container and it works on both Android and iOS platforms. Thank you very much! – mesllo Feb 15 '17 at 12:00
2

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.

sol
  • 22,311
  • 6
  • 42
  • 59
1

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.

Gabriel
  • 408
  • 5
  • 12