如何创建围绕输入框的 CSS 边框？

发布于 2024-12-10 12:53:59 字数 749 浏览 1 评论 0原文

我似乎无法通过谷歌来摆脱这个困境。我正在尝试重新创建如下所示的输入框。我想在输入框外部创建一个微妙的透明边框（透明度会有点低，在模型中很难看到。）

它似乎是在文本框内部而不是外部创建边框。它还在边框底部（可能是输入框本身的底部）形成鲜明的突出显示。

模型图像

示例1
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 的建议。

原文

I cannot seem to Google my way out of this one. I am trying to re-create the input box shown below. I would like to create a subtle transparent border outside the input box (will be a bit less transparent, kind of hard to see in mock-up.)

It seems to be making the border inside of the text box, not outside it. Also it is making a sharp highlight on the bottom of the border (possibly the bottom of the input box itself.)

Mock-up Images

example1
example2

My CSS for the input box

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

Any ideas? I'm kind of new to CSS, so any suggestions to improve my CSS is welcomed as well.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

错爱 2024-12-17 12:53:59

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

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

The background of an element extends underneath the border by default. To change this behaviour use the following:

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

Another, simpler option is to use the spread property of CSS box-shadows:

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

回复收藏 0 原文

终止放荡 2024-12-17 12:53:59

您只需将输入背景图像：添加到 css 图像精灵中的字段中，然后就到此为止并在所有浏览器中保持一致性。

回复收藏 0 原文

轮廓§ 2024-12-17 12:53:59

这应该可以解决问题。 =) （粗略示例：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;
}

This should do the trick. =) (Rough sample: 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;
}

回复收藏 0 原文

~没有更多了~