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

Question

我是css的初学者所以请耐心等待：D

我尝试创建此自定义文本字段：

所以我有两种不同的颜色，只是说内部背景颜色A（大颜色）和外部背景颜色B.

所以我认为外层（颜色B）可以是<span>，颜色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;
}