仿google和百度搜索框两边和文本之间留间距

领秀故湘

      最近我把站内的GOOGLE自定义搜索框改为用圆角图片来代替后，却发现当输入框中的文本如果超出搜索框的宽度时，左边的文本就会挤到左边的搜索边框线上！后来通过研究GOOGLE和百度搜索框，终于得到圆满解决！html代码如下：

  
<form id="cse-search-box" action="http://www.google.com/cse" name="cse-search-box">
    <div>
        <strong><input name="cx" style="width:240px; height:24px;" type="hidden" value="004534141474646751918:xnjsr_8zx34" /> <input name="ie" type="hidden" value="UTF-8" /> <span class=
        "s_ipt_wr"><input style="margin-left:15px;width:220px;margin-top:1px; height:24px;line-height:24px;border:0;background-color:transparent;" name="q" size="35%" value="请输入要搜索的关键字.." onfocus=
        "this.value=''" onblur="if(!value) {value=defaultValue;}" /></span> <input alt="Submit" style="border:0; background:none ;" src=
        "http://u.jimdo.com/www102/o/se1898f6aca8775dc/userlayout/img/lxsea.png?t=1359536737" type="image" align="absmiddle" /></strong>
    </div>
</form>
      

  

             以上代码最关键的就在红色所示的地方，思路是在搜索框name="q"外面加个 class=
        "s_ipt_wr"把它包起来然后把原来插入在name="q"的背景圆角框放在class=
        "s_ipt_，这时还要把类“Q”里面的宽度设置小于背景图的宽度！比如我就从原来的250PX缩小到220px。

         background-color:transparent;表示将输入文本的背景色设置为灰色即相当于透明，不然有白边！

         margin-left:15px;是把搜索文本向右缩进，由于搜索文本的宽度小于背景圆角框的宽度，所以不管你在里面输入多少文字，搜索框的两端都会始终留有一点间距而不会靠拢更不会因为用的是圆角框而显示在边框线上！
     css代码如下：

.s_ipt_wr {
        background: url("http://u.jimdo.com/www102/o/se1898f6aca8775dc/userlayout/img/xltxdss.png") no-repeat ;display: inline-block;
           height: 24px;
           width: 250px;
}

  

  

  以上CSS代码中的：

       display: inline-block;让class=
        "s_ipt_wr块元素的name="q"并排显示，不然就会错位·！

  
     我的原来的站内搜索代码是纯HTML代码，现将它发布在下面供有兴趣的研究：

<form id="cse-search-box" action="http://www.google.com/cse" name="cse-search-box">
            <div>
                <strong><input name="cx" style=" width:240px; height:24px;" type="hidden" value="004534141474646751918:xnjsr_8zx34" /> <input name="ie" type="hidden" value="UTF-8" /> <input style=
                "width:250px; height:24px;text-align:center;line-height:24px;border:0; background:none;BACKGROUND-IMAGE: url(http://u.jimdo.com/www102/o/se18 ... ss.png?t=1359537129);"
                name="q" size="35%" value="请输入要搜索的关键字.." onfocus="this.value=''" onblur="if(!value) {value=defaultValue;}" /> <input alt="Submit" style="border:0; background:none ;" src=
                "http://u.jimdo.com/www102/o/se1898f6aca8775dc/userlayout/img/lxsea.png?t=1359536737" type="image" align="absmiddle" /></strong>
            </div>
        </form>


本文出处:http://lxgx.jimdo.com

烟花散后

从CSS方面入手会不会能更有效的解决

领秀故湘

烟花散后 发表于 2013-2-26 14:01
从CSS方面入手会不会能更有效的解决

我试了,不行啊，如果不在文本输入框外面加一个块而只用CSS就会乱布局，比如撑破右面的圆角边框！不知道你有没有更好的办法？欢迎探讨。

烟花散后

以前貌似有圆角边框的CSS定义例子，我空了研究研究

领秀故湘

烟花散后 发表于 2013-2-26 15:01
以前貌似有圆角边框的CSS定义例子，我空了研究研究

对了，如果用css定义圆角框可能不会出现文本溢出到边框线上的情况，但问题是对GOOGLE自定义站内搜索不好定义啊！

领秀故湘

领秀故湘 发表于 2013-2-26 15:04
对了，如果用css定义圆角框可能不会出现文本溢出到边框线上的情况，但问题是对GOOGLE自定义站内搜索不好定 ...

如果你什么时候研究出来别忘了分享啊！

烟花散后

领秀故湘 发表于 2013-2-26 15:05
如果你什么时候研究出来别忘了分享啊！

一定一定，我在看wordpress皮肤，里面很多都是圆角的搜索框