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

Question

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

我尝试创建这个自定义文本字段:

所以我有 2 种不同的颜色，只说颜色 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

给你，查看演示 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;
}