HTML & CSS Make Date Field look like Text field

[kiwis]

As the title suggests, I want my date field to have the same padding etc as my text field.

How can I do this?

https://codepen.io/kodee/pen/ExQjdor

 

[Malcolm]

As the title suggests, I want my date field to have the same padding etc as my text field.

How can I do this?

https://codepen.io/kodee/pen/ExQjdor

Hey there,

On my phone so might not be able to provide the best answer. But in your CSS you can specify the selector as your ID value in your HTML.
For example:

#dob {
   padding: 10px;
}

 

[kiwis]

Hey there,

On my phone so might not be able to provide the best answer. But in your CSS you can specify the selector as your ID value in your HTML.
For example:

#dob {
   padding: 10px;
}

Yeah that looks okay, but doesn't work on iphone...

 

[Malcolm]

Yeah that looks okay, but doesn't work on iphone...

How so?

 

[kiwis]

How so?

It's as wide as the day,month, year inputs require. Everything else is the width of the screen with padding.

 

[Malcolm]

It's as wide as the day,month, year inputs require. Everything else is the width of the screen with padding.

Hmm, try this:

input[type="text"],
input[type="date"] {
  padding: 1rem;
  outline: none;
  border: solid 1px #000;
}

In your css code, I noticed you specified button but should be "input" as the css format selector{} refers to an HTML tag in CSS. In your HTML you have two inputs.