0

我是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

4

5 回答 5

1

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

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

于 2013-06-23T10:04:49.193 回答
1

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

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

于 2013-06-23T10:04:51.347 回答
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" />
于 2013-06-23T10:04:53.273 回答
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;
}
于 2013-06-23T10:13:55.203 回答
1

给你,检查 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;
}
于 2013-06-23T10:20:44.537 回答