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

enter image description here

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

所以我觉得外一个（颜色B）可能是一个<span>和颜色是<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

来源

2013-06-23 Blaze Tama

在这里你去，检查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; 
}

来源

2013-06-23 10:20:44 yeyene

非常感谢：D您能解释一下你在做什么？为什么这两个元素都需要float：left？ –

Okie，我们使用浮动资产，以便我们能够以更复杂的方式控制信息的呈现方式。更多细节在这里... http://coding.smashingmagazine.com/2007/05/01/css-float-theory-things-you-should-know/ – yeyene

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

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

来源

2013-06-23 10:04:49

感谢您的建议，我也觉得这一个：d –

我相信这是你正在寻找什么样的代码，而且颜色可能不一样..只是挑出来随机:)

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

来源

2013-06-23 10:04:51

非常感谢您的帮助：d它太糟糕了，我只能接受一个答案 –

你可以更加简化它，只用输入（例如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-23 10:04:53 slash197

非常感谢您的帮助：d它太糟糕了，我只能接受一个答案 –

这都有点接近

<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-23 10:13:55 mohkhan

非常感谢您的帮助：D它太糟糕了，我只能接受一个答案 –

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

回答

截图

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

回答

截图

相关问题