深入了解我的意见

Question

我试图在css中做一个基本的效果来给我的输入一些深度，如下图所示。我正在尝试使用下面的代码，但是这里缺少任何东西，因为我的结果对于我的图像示例来说并不是真的。

我的HTML：

<form>
    <input type="text" placeholder="Search..." />
</form>

我的css：

input[type="text"] {background-color:#232323; color:#fff; border:1px solid #151515;  -webkit-border-radius: 15px;}

我在尝试什么：

Answer 1

这里最后需要2个元素：一个用于深灰色背景，另一个用于输入。

我的其余部分已经过测试，适用于IE10 +，FF＆amp;铬。如果您正在寻找9及以下的IE支持，那么开箱即可使用。它还依赖于设置一些固定的宽度。

您回想起我提到了两个元素，无论如何你都是should be using a label标签。

将HTML调整为以下内容：

<label>Search
    <input type="text" placeholder="Search" />
</label>

下面的CSS定位输入以隐藏label文本。

label {
    display:inline-block;
    border:1px;
    padding:10px;
    background-color:#111;
    position:relative;
    color:#FFF;
    width:200px;
    height:20px;
}
label input {
    -moz-box-shadow: inset -1px -1px 2px #CCC;
    -webkit-box-shadow: inset -1px -1px 2px #CCC;
    box-shadow: inset -1px -1px 2px #CCC;
    border-radius:5px;
    background-color:#000;
    color:#FFF;
    border:none;
    padding:3px;
    position:absolute;
    left:5px;
    padding:5px;
    width:200px;
    height:16px;
    top:7px; /* This is ((label hight + (padding * 2)) - this height)/2;*/
             /* e.g. ((20 +  (2 * 10)) - 16)/2 */
 }

Demo

Answer 2

不确定你的意思，但这是否接近你想要的？

input[type="text"] {
   background-color:#232323;
   color:#fff;
   padding:2px 5px;
   border:5px solid #151515;
   -webkit-border-radius: 15px;
}