I am a beginner in the area and I am not very knowledgeable, I have the following code, and I would like it to be filled in with numbers only and in the format "00/00/0000" and "00:00" respectively. I know there are other means, but I would like to know how to do this using only css. It's possible?
<input type="text" id="txtdia" size="4px" style="text-align:center" placeholder="Dia"/>
<input type="text" id="txthora" size="4px" style="text-align:center" placeholder="Hora"/>
Fares I had spoken in the comment of the possibility of doing so with css, but I believe that it is not worth much, since you would have to take the placeholder default of the field and then put another ...
Then the solution I give you and changing the type of input in the click as you can test below. So it has less code involved and gives you a cool result that should suit you. Briefly, when you focus on input it changes the type of text to the type you set onfocus="(this.type='time')" etc and when you click it it returns to text
input {
width: 160px;
}<input type="text" id="txtdia" style="text-align:center" placeholder="Dia" onfocus="(this.type='date')" onblur="(this.type='text')"/>
<input type="text" id="txthora" style="text-align:center" placeholder="Hora" onfocus="(this.type='time')" onblur="(this.type='text')"/> Alternatively, you can also use the new HTML5 input types, which are of type date and time .
Your syntax would be:
<input id="date" type="date">
<input id="time" type="time">
.datetime {
border: 1px solid #c9c9c9;
border-radius: 5px;
display: block;
height: 35px;
margin: 8px 0;
width: 200px;
}
input[type="date"]::-webkit-inner-spin-button,
input[type="date"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}
input[type="time"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-calendar-picker-indicator {
display: none;
-webkit-appearance: none;
}<input id="time" class="datetime" type="time">
<input id="date" class="datetime" type="date">As a reference, follow two links if you want to know more!