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

时间:2013-06-23 09:55:54

标签: css

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

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

enter image description here

所以我有两种不同的颜色,只是说内部背景颜色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

5 个答案:

答案 0 :(得分:1)

嗯...我看到三种颜色..黑色,棕色和黄棕色。但如果只有棕色和黄棕色。你不再需要#search span了。

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

#search #txtSearch

答案 1 :(得分:1)

我相信这是你想要的代码,颜色可能不一样..只是随机挑选出来:))

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

答案 2 :(得分:1)

只需输入(例如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" />

答案 3 :(得分:1)

这有点接近

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

答案 4 :(得分:1)

在这里,请查看DEMO http://jsfiddle.net/yeyene/UcTsv/2/

截图

enter image description here

使用此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;
}