如何使用CSS更改默认按钮边框？

Question

我的表单中有一个按钮，想要更改其默认边框。

我无法删除默认值并添加我的默认值，我有两个或没有

button.boton{
   cursor: pointer; 
   position: relative;
   background:red;
   border:none; /*delete the default one*/
   border: 1px solid blue; /*add my own border */
}

我该怎么做？

Answer 1

尝试将此添加到CSS：

-webkit-appearance:none;

确保没有其他任何内容在按钮周围添加边框。

Answer 2

使用类标识符将样式应用于按钮：

CSS代码：

button.boton{
   cursor: pointer; 
   position: relative;
   border: 1px solid blue; /*add my own border */
}

HTML代码：

<button class="boton"> Button </button>

另请尝试此jsfiddle链接

编辑：

以下是Internet Explorer 11版

中输出文件的屏幕截图

对于IE9：

如果指定3个边框，那么这些边框将在IE9中呈现。指定第4个边框后，IE9拒绝渲染任何边框

button.boton{
       cursor: pointer; 
       position: relative;
       border-top: 1px solid blue;
       border-right: 1px solid blue;
       border-bottom: 1px solid blue;
    }

Answer 3

您无需两次设置边框。设置边框时，它将删除先前设置的所有属性。