首页新闻找找看学习计划

不一样的搜索框

0
悬赏园豆:30 [已解决问题] 解决于 2014-09-29 17:58

大家好,谁能告诉我这个搜索框如何实现的,最好给我代码,我弄一天都没弄出来!

 还有就是这个menu显示的这个凸出显示是看起来特别显眼,这个是怎么实现的或者告诉这个是 css什么属性,是不是border-radius(可是我没弄出这样的效果),求指教!

逗号s的主页 逗号s | 初学一级 | 园豆:4
提问于:2014-09-29 16:39
< >
分享
最佳答案
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
经年 | 初学一级 |园豆:59 | 2014-09-29 16:49

哦 非常感谢 

逗号s | 园豆:4 (初学一级) | 2014-09-29 17:48

@逗号s: 如果答案你还满意就把30豆给我吧,我缺豆豆

经年 | 园豆:59 (初学一级) | 2014-09-29 17:49

再请问一下,除搜索框外下面那个斜着凸起来的是用的border-radius弄出来的效果吗

逗号s | 园豆:4 (初学一级) | 2014-09-29 17:50

@逗号s: box-shadow效果,,,你应该百度一下box-shadow 以及text-shadow属性的方法

经年 | 园豆:59 (初学一级) | 2014-09-29 17:52

@经年: 嗯  谢谢高手指教

逗号s | 园豆:4 (初学一级) | 2014-09-29 17:53

@逗号s: 不客气,我是为了豆子

经年 | 园豆:59 (初学一级) | 2014-09-29 17:55
其他回答(6)
0

去找找easyui之类的,拿过来直接用就好了

draculav | 园豆:734 (小虾三级) | 2014-09-29 16:42
0

你起码告诉大家你这效果在哪个网站哪个链接URL看到的。到那个网站看看就能找出来怎么做的了,你找不出来并不代表别人找不出来。

如果你只贴一个图,就变成要原创或者正好有人做过这效果。

爱编程的大叔 | 园豆:30471 (高人七级) | 2014-09-29 16:42

这个url还真没有,只是一个图片

支持(0) 反对(0) 逗号s | 园豆:4 (初学一级) | 2014-09-29 16:46
0

Chrome F12,然后选中它,就能看到实现代码了。

幻天芒 | 园豆:36594 (高人七级) | 2014-09-29 16:44

这是图片,不是网址,查看不了 

支持(0) 反对(0) 逗号s | 园豆:4 (初学一级) | 2014-09-29 16:49

@逗号s: 最简单的做法,一个背景图搞定。

支持(0) 反对(0) 幻天芒 | 园豆:36594 (高人七级) | 2014-09-29 16:54
0

右击,审查元素!

✎﹏ℳ๓₯㎕ღ | 园豆:1497 (小虾三级) | 2014-09-29 16:46
0

告诉你个投机取巧的办法,把这图片当做背景图片然后弄个文本框,把文本框边框设none控制文本框padding移位

 

骑着蜗牛耍流氓 | 园豆:178 (初学一级) | 2014-09-29 16:56

不行,没看到那个文本框里面有字啊

支持(0) 反对(0) 逗号s | 园豆:4 (初学一级) | 2014-09-29 16:57

@逗号s: 这效果想做很容易,

首先你把图片文字PS掉,

然后按照刚才说的做,

接着用JS控制文本框没值时默认显示灰色字体

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:178 (初学一级) | 2014-09-29 16:59

还是要想办法自己弄出来,这种投机的方法我觉得行不通

 

支持(0) 反对(0) 逗号s | 园豆:4 (初学一级) | 2014-09-29 17:00

@逗号s: 就算你用css3属性自己做文本框出来,IE浏览器也是不太好支持的

支持(0) 反对(0) 骑着蜗牛耍流氓 | 园豆:178 (初学一级) | 2014-09-29 17:01
0

这个用样式其实就可以实现,那个角效果其实是一个文本的背景图

<input type="text" style="broder=0;padding:0 10 0 10;background:url(北京图片地址)" />

类似这样就可以了。

Alex_QY1987 | 园豆:1888 (小虾三级) | 2014-09-29 18:00
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册