我似乎无法通过Google解决这个问题。我正在尝试重新创建如下所示的输入框。我想在输入框外面创建一个微妙的透明边框(透明度稍差,很难在模型中看到。)
似乎是在文本框内部创建边框,而不是在文本框之外。此外,它还在边框底部(可能是输入框本身的底部)上突出显示。
#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的建议。
答案 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;
}