Question

我正在尝试创建一个只有一个边框（即左边框）的输入框，但是每次我将border-left放到选择器上时，顶部，右边，底部边框都会显示出来（带有斜面和浮雕外观）。这就是我现在所拥有的。

HTML

<input type="text" id="fullname" class="detail" name="fullname" value="" />

CSS

.detail {
    border-left: 1px #fff solid;
    background: transparent;
    width: 490px;
    height: 30px;
    padding-left: 10px;
}

这是我的JSFiddle：http://jsfiddle.net/XRFB3/

Answer 1

首先设置默认边框：

.detail {
    border:0;
    border-left: 1px #fff solid;
    background: transparent;
    width: 490px;
    height: 30px;
    padding-left: 10px;
}

JSFiddle

Answer 2

尝试首先重置边框like border: none;。这是因为如果未定义自定义，浏览器会应用默认的用户代理样式。

.detail {
        border: none;
        border-left: 1px #fff solid;
        background: transparent;
        width: 490px;
        height: 30px;
        padding-left: 10px;
    }

Answer 3

使用以下

border: none;
border-left: 1px Solid #fff;

而不是

border-left: 1px #fff solid;

在输入选择器上只显示一个边框？

3 个答案: