不一样的搜索框
0
大家好，谁能告诉我这个搜索框如何实现的，最好给我代码，我弄一天都没弄出来！
最佳答案
0
这个一共分为两层，第一层是背景层，也就是控制阴影圆角的，第二层是放input输入框和btn按钮的，这个是前提，然后，就是细节了，实现圆角很简单，border-radius就可以，阴影采用box-shadow就能够实现，具体参数自己研究。
圆角是：border-radius属性
阴影是：box-shadow 属性
然后自己研究吧
我发现不贴代码根本不会有人看……
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>无标题文档</title> 6 <style> 7 body{ 8 background:#9CF; 9 } 10 .inputBg { 11 width:200px; 12 height:30px; 13 border-radius:15px; 14 background:#fff; 15 box-shadow: 2px 3px 1px #ccc inset; 16 } 17 .inputBg input[type="text"] { 18 width:155px; 19 height:19px; 20 margin:4px 0 4px 12px; 21 border:none; 22 float:left; 23 } 24 .inputBg input[type="image"] { 25 width:20px; 26 height:18px; 27 margin-top:6px; 28 border:none; 29 } 30 </style> 31 </head> 32 33 <body> 34 <div class="inputBg"> 35 <input type="text" > 36 <input type="image" src="s.jpg"> 37 </div> 38 <!--s.jpg是那个搜索小按钮--> 39 40 41 42 </body> 43 </html>
我这是在支持一些CSS3阴影的情况下，如果说想支持一些老版本 那就只能说抱歉了，用背景图片吧
收获园豆：30
哦 非常感谢
@逗号s: 如果答案你还满意就把30豆给我吧，我缺豆豆
再请问一下，除搜索框外下面那个斜着凸起来的是用的border-radius弄出来的效果吗
@逗号s: box-shadow效果，，，你应该百度一下box-shadow 以及text-shadow属性的方法
@经年: 嗯 谢谢高手指教
@逗号s: 不客气，我是为了豆子
其他回答(6)
0
去找找easyui之类的，拿过来直接用就好了
0
你起码告诉大家你这效果在哪个网站哪个链接URL看到的。到那个网站看看就能找出来怎么做的了，你找不出来并不代表别人找不出来。
如果你只贴一个图，就变成要原创或者正好有人做过这效果。
这个url还真没有，只是一个图片
0
Chrome F12，然后选中它，就能看到实现代码了。
这是图片，不是网址，查看不了
@逗号s: 最简单的做法，一个背景图搞定。
0
右击，审查元素！
0
告诉你个投机取巧的办法，把这图片当做背景图片然后弄个文本框，把文本框边框设none控制文本框padding移位
不行，没看到那个文本框里面有字啊
@逗号s: 这效果想做很容易，
首先你把图片文字PS掉，
然后按照刚才说的做，
接着用JS控制文本框没值时默认显示灰色字体
还是要想办法自己弄出来，这种投机的方法我觉得行不通
@逗号s: 就算你用css3属性自己做文本框出来，IE浏览器也是不太好支持的
0
这个用样式其实就可以实现，那个角效果其实是一个文本的背景图
<input type="text" style="broder=0;padding:0 10 0 10;background:url(北京图片地址)" />
类似这样就可以了。
