css - 具有两种不同颜色（内部和外部）的自定义文本字段

Question

我是css的初学者，所以请多多包涵：D

我试图创建这个自定义文本字段：

所以我有 2 种不同的颜色，只说颜色 A 用于内部背景（大的）和颜色 B 用于外部背景。

所以我认为外面的（颜色B）可能是a <span>，颜色A是a <input type="text"> （我不知道这是否是最好的方法，我对其他解决方案非常开放，因为我缺乏css经验）

所以这是我的 html 代码：

<div id="search">
        <span><input type="text"  id="txtSearch"/></span>
</div>

这是我的CSS：

/*THIS IS COLOR B, THE OUTER ONE*/
#search span {
    background: #c4a76e;
    overflow: auto;
    margin: 3%;
}

/*THIS IS COLOR A, THE INNER ONE*/
#search #txtSearch {
    float: left;
    border-radius: 3%;
    background: #fdf4d6;
    padding: 5%;
    border: thin solid black;
}

我计划将填充背景颜色设置为颜色 B，并将文本字段设置为自身颜色 A，但它不起作用。我只是得到一个背景颜色为 A 的文本字段。

我应该怎么办？

任何帮助表示赞赏，如果您需要其他帮助，请告诉我。

谢谢你的时间：D

Answer 1

嗯……我看到三种颜色……黑色、棕色和黄棕色。但万一只有棕色和黄棕色。你不再需要#search span了。

你可以 border: 3px solid #c4a76e;使用#search #txtSearch

Answer 2

我相信这就是您要编码的内容，并且颜色可能不一样..只是随机挑选出来的 :)

http://codepen.io/AmruthPillai/pen/DJiao

Answer 3

您可以进一步简化它，只使用输入（例如http://jsfiddle.net/slash197/2zn8B/）：

CSS

input {
    box-shadow: 0px 0px 0px 10px #ff0000;
    background-color: #00ff00;
    border: 1px solid #000000;
}

HTML

<input type="text" />

Answer 4

这有点接近

<div id="search">
    <div><input type="text"  id="txtSearch"/></div>
</div>


#search div {
    border : solid 1px black;
    float : left;
    max-width : 100%;
    padding : 10px;
    background-color: #fdf4d6;
    border-radius: 3%;
}

#search #txtSearch {
    float : left;
    border-radius: 3%;
    background: #c4a76e;
    padding: 15px;
    border: solid 0px #fdf4d6;
}

Answer 5

给你，检查 DEMO http://jsfiddle.net/yeyene/UcTsv/2/

截屏

使用这个 css 并完成。

/*THIS IS COLOR B, THE OUTER ONE*/
#search span {
    float:left;
    margin:0;padding:0;
    border:2px solid #403726;
    -webkit-border-radius: 7px; 
    -moz-border-radius: 7px; 
    border-radius: 7px;
    background:#d9b980;
}

/*THIS IS COLOR A, THE INNER ONE*/
#search #txtSearch {
    margin:0;
    width:170px;
    background: #ffe692;
    padding: 10px;
    border:5px solid #d9b980;
    -webkit-border-radius: 8px; 
    -moz-border-radius: 8px; 
    border-radius: 8px;
}