Question

我想设置自己的按钮。我设法摆脱了默认风格，但现在我想在它周围添加一个细蓝色边框，但不知道如何。如果我只是摆脱边框：无，那么默认样式会回来，这不是我想要的这是我的style.css：

input#hideshow{
    margin: 0;
    border: none;
    border-radius: 20px;
    padding: 2px 0px 2px 8px;
    color: #4D7782;
    font-size:18px;
    background: #D3ECE5;
    border-color: #7BC2E3; //not showing up though
    width: 280px;
    text-align: left;
}

Answer 1

你只是单独指定了边框颜色。你忘了指定边框宽度

Demo

border: 2px solid #7BC2E3;

Answer 2

你的CSS完美无缺。但是你不希望它以这种方式工作。您将border设置为none，因此不会显示任何边框。你应该更好地设置，例如：

border: 1px solid #7BC2E3;

然后移除border-color行。

https://developer.mozilla.org/en-US/docs/Web/CSS/border

Answer 3

您还需要指定border-style，因为它的默认值为none demo。

但最简单的方法是使用border简写并指定 border-width：

border:1px solid #7BC2E3;

并删除border:none;

<强> DEMO

CSS：

input#hideshow{
    margin: 0;
    border-radius: 20px;
    padding: 2px 0px 2px 8px;
    color: #4D7782;
    font-size:18px;
    background: #D3ECE5;
    border:1px solid #7BC2E3;
    width: 280px;
    text-align: left;
}

Answer 4

尝试这样做：

input#hideshow{
    margin: 0;
    border:1px solid blue;
    border-radius: 20px;
    padding: 2px 0px 2px 8px;
    color: #4D7782;
    font-size:18px;
    background: #D3ECE5;
    border-color: #7BC2E3; //not showing up though
    width: 280px;
    text-align: left;
}

希望这就是你想要的。

Answer 5

请尝试以下操作： Demo

border:1px solid #7BC2E3;

并删除

来自您代码的

border:none

造型自己的按钮

5 个答案: