HTML / CSS - input date height width

Asked

Viewed 1,030 times

3

How can I change the height and width tag input date and time in HTML itself or in CSS ?

html css

  • become if you have a new question, ask it, do not change the current question as there is already an answer to it. I am reversing your edit.

3 answers

3

You can add the style tag directly to your html tag for example : 

<input type="date" name="date" id="date" style="width:500px;height:500px;">

But it is not recommended and if I am not mistaken it is not a good practice.

3


You can select the type of input who wants using the attr from CSS to type date and kind time thus.

In this example beyond the width I put a bordar for you to see how it only picks up the style in the inputs with the type defined in attr

input[type="date"], 
input[type="time"] {
    width: 200px;
    height: 30px;
    border: 2px solid green;
}
<input type="date">
<input type="time">
<input type="text" placeholder="tipo text">
<input type="email" placeholder="tipo email">

  • 1

    Thank you... it worked. I wanted to know now how I shoot the caption, that does not appear "dd/mm/yyyy" and "-- : --".

  • @Note that this will change the class of all data and time inputs, so you can encapsulate them within your form by placing a parent class like form.contato input[type="date"] { } this will cause only the inputs of this type within the form with the contact class take the css not all input date of your entire site if it is the case to have others understands

  • I get it... but how do I do it?

  • I put it like this... but it didn’t give... input[type="date"]::-Webkit-Inner-spin-button, input[type="date"]:-Webkit-Calendar-Picker-Indicator { display: None; -Webkit-Appearance: None; }

  • @What happens is that for some reason the browser will only accept the class if you put them apart by types. Thus "input[type="date"]::-Webkit-Inner-spin-button, input[type="date"]::-Webkit-Calendar-Picker-Indicator { }" and the other so "input[type="time"]::-Webkit-Inner-spin-button { }" if vc put the two types together only separated by the comma the browser does not recognize I don’t know pq...

1

Using CSS:

<style type="text/css">
    #date{width:500px;height:500px}
</style>
<input type="date" name="date" id="date">

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.