html - 如何使用 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 代码:

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