如何从 CSS 中的输入按钮中删除不需要的边框？

消除输入按钮中不需要的边框

在与网站交互时，用户经常会遇到输入按钮，这些按钮作为提交数据的交互元素或发起一项行动。但是，这些按钮在单击或聚焦时有时可能会显示难看的边框。

在 CSS 中，outline 属性负责在按钮周围创建可见边框。默认情况下，Web 文档中的元素在聚焦时会收到虚线轮廓。对于输入按钮，此轮廓可能会特别分散注意力。

解决方案：删除轮廓

要消除不需要的边框，您可以利用通过将其值设置为 none 来显示轮廓属性。操作方法如下：

input[type=button] {
  width: 120px;
  height: 60px;
  margin-left: 35px;
  display: block;
  background-color: gray;
  color: white;
  border: none;
  outline: none;
}

示例

将这些样式应用于 HTML 输入按钮将在单击或获得焦点时删除轮廓，为您留下干净、无缝的用户体验体验：

<input type="button" value="Example Button">

Chrome用户注意事项

在Chrome中，使用outline去除轮廓边框：none；财产可能不够。在这种情况下，需要额外的 CSS 行：

-webkit-appearance: none;

应用两者 轮廓：无；和 -webkit 外观：无；属性到您的 CSS，以确保边框不会出现在 Chrome 浏览器中。

以上是如何从 CSS 中的输入按钮中删除不需要的边框？的详细内容。更多信息请关注PHP中文网其他相关文章！