CODEWITHSUNDEEP
htmlcssfrontend
AMORE
AMORE

Reputation: 109

set same style for input and button, but they look different

input{
  height:30px;
  width:77px;
  margin:10px;
  display:inline-block;
}
button{
  height:30px;
  width:77px;
  margin:10px;
  display:inline-block;
}
select{
height:30px;
  width:77px;
  margin:10px;
  display:inline-block;
}
<input value="value" name="test" type="text"/>
<select></select>
<button>test</button>

I have input, select and button these three element all have the same style, but they look different, could anybody please tell me why?

Upvotes: 2

Views: 873

Answers (3)

Gin&#233;s Ruiz
Gin&#233;s Ruiz

Reputation: 183

So, the browser has a default styles for each element, and you need to overwrite these style, the best solution i found is to combining the three selectors and adding background-color: white and border: 1px solid black for the button and box-sizing: border-box to fix the height.

   
input, select, button{
  height:30px;
  width:77px;
  margin:10px;
  display:inline-block;
  background-color: white;
  border: 1px solid black;
  box-sizing: border-box
}
   
<input value="value" name="test" type="text"/>
<select></select>
<button>test</button>

Upvotes: 0

MertHaddad
MertHaddad

Reputation: 573

It is a browser default styling,

you can fix it by adding :

input{box-sizing:border-box}

the code :

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <input resize value="value" name="test" type="text"/>
<select></select>
<button>test</button>
</body>
</html>

css :

  input,button,select{
  display:inline-block;
  height:30px;
  width:77px;
  margin:10px;
  margin:10;
    
}
input{box-sizing:border-box}

I combined your css since you are going to apply the same option for all the elements.

demo

Upvotes: 0

Spankied
Spankied

Reputation: 1895

The browser applies default styling for each element. Here's some of those. There are libraries like normalize that reset some of these styles and creates consistency between browsers.

Upvotes: 1

Related Questions