CODEWITHSUNDEEP
htmlcss
kofifus
kofifus

Reputation: 19285

default input border shows differently on div

If I create an input box without any styles (<input>) and then inspect the computed css in devtools I see it has border 2px inset rgb(238, 238, 238)

However if I create a div with the same border it looks very different:

<input>
<br><br>
<div style="border: 2px inset rgb(238, 238, 238); height:15px; width: 169px; "></div>

Why is that ? and what kind of border will give me the same one as the input ?

Upvotes: 2

Views: 148

Answers (4)

kofifus
kofifus

Reputation: 19285

OK fount it

input has the -webkit-appearance:textfield; style on it

div {
  border: 2px inset;
  -webkit-appearance: textfield;
  height: 15px;
  width: 169px;
}
<input>
<br><br>
<div></div>

Upvotes: 0

Felix A J
Felix A J

Reputation: 6470

It is actually a 2px border. If you change the background of the input, we can see the 2px border. See below with background:#f1f1f1 for the input.

<input style="background:#f1f1f1;">
<br><br>
<div style="border: 2px inset rgb(238, 238, 238); height:15px; width: 169px; "></div>

Upvotes: 2

Kushan
Kushan

Reputation: 10695

This is more likely identical to your <input> style

border: 1px solid rgba(0,0,0,0.4);
height: 19px;
width: 171px;

inset - Defines a 3D inset border.

solid - Defines a solid border.

This is the main different in your style.

Upvotes: 1

Carl Binalla
Carl Binalla

Reputation: 5401

Like this?

<input>
<br><br>
<div style="border: 1px solid rgba(0, 0, 0, 0.4); height:15px; width: 169px; "></div>

Upvotes: 2

Related Questions