为输入和按钮设置相同的样式，但它们看起来不同答案

【问题标题】：set same style for input and button, but they look different为输入和按钮设置相同的样式，但它们看起来不同
【发布时间】：2022-01-20 03:41:38
【问题描述】：

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>

我有输入、选择和按钮这三个元素都有相同的样式，但它们看起来不同，谁能告诉我为什么？

【问题讨论】：

您想让文本输入看起来像一个按钮吗？尝试使用输入类型=提交。或者让我们知道您希望看到的这些样式
每个浏览器对每个元素都有自己的默认样式。各种品牌的默认样式也略有不同。您可以使用 CSS Reset 来对齐不同浏览器中的所有样式。
使用 CSS 重置。网上很多

标签： html css frontend

【解决方案1】：

浏览器为每个元素应用默认样式。 Here's 其中一些。有像 normalize 这样的库可以重置其中一些样式并在浏览器之间创建一致性。

【讨论】：

【解决方案2】：

这是浏览器默认样式，

您可以通过添加来修复它：

input{box-sizing:border-box}

代码：

<!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}

我合并了你的 css，因为你要对所有元素应用相同的选项。

demo

【讨论】：

【解决方案3】：

所以，浏览器对每个元素都有一个默认样式，您需要覆盖这些样式，我发现的最佳解决方案是结合三个选择器并为按钮添加 background-color: white 和 border: 1px solid black 以及 box-sizing: border-box固定高度。

   
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>

【讨论】：