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

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?

CodePudding user response：

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.

CodePudding user response：

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

CodePudding user response：

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>