如何在输入框周围创建CSS边框?

时间:2011-10-17 02:21:39

标签: html css forms user-interface border

我似乎无法通过Google解决这个问题。我正在尝试重新创建如下所示的输入框。我想在输入框外面创建一个微妙的透明边框(透明度稍差,很难在模型中看到。)

似乎是在文本框内部创建边框,而不是在文本框之外。此外,它还在边框底部(可能是输入框本身的底部)上突出显示。

模拟图像

example1
example2

我输入框的CSS

#merchantForm>form>input.inputValue {
    border-radius: 3px;
    height: 30px; width: 350px;
    margin-top: 5px;
    font-family: Helvetica,sans-serif; font-weight: bold; font-size: 19px; color: #333;
    -moz-box-shadow: 0px 1px 0px #f2f2f2;-webkit-box-shadow: 0px 1px 0px #f2f2f2;
    border-style: solid;
    border-width: 5px;
    border-color: rgba(0,0,0,0.3);
}

有什么想法吗?我对CSS很陌生,所以我们也欢迎任何改进CSS的建议。

3 个答案:

答案 0 :(得分:4)

默认情况下,元素的背景在边框下方延伸。要更改此行为,请使用以下命令:

-webkit-background-clip: content-box;
   -moz-background-clip: content-box;
        background-clip: content-box;

另一个更简单的选择是使用CSS box-shadows的spread属性:

-webkit-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
   -moz-box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);
        box-shadow: 0 0 0 10px hsla(0, 0%, 0%, 0.5);

答案 1 :(得分:0)

你可以在css图像精灵中添加输入背景图像:并将其调用一天,并在所有浏览器中保持一致。

答案 2 :(得分:-1)

这应该可以解决问题。 =)(粗略样本:http://d.pr/nDaN

input.custom-input {
    width: 250px;
    font-size: 20px;
    padding: 15px;
    border: none;
    border: 5px solid rgba(0,0,0,0.75);
    border-radius: 5px;
    box-shadow: inset 5px 5px 5px #CCC;
}