css3搜索框样式,css设置搜索框

css3中search是什么意思? 一个input标签里面，class定义为 search

这个search是个自定义的类名，也就是说如果有多个元素设定了这个类名，那么只要在css中给这个类设定样式，那么这些元素都会是同样的样式。

补充说一下：类名是可以任意设置的，只要符合html的命名规则即可。也就是说，“search”在这里只是个名字，本身不具有意义，就好像问“姚明是什么意思”一样。

另外，name在这里也是个类名，当一个class同时设置多个类名时，它会自动把这些类的css样式进行合并（如果样式之间存在冲突，则后面的会覆盖前面的）。

再再补充一下：一个元素具有多个类，你可以在生活中随处找到例子，比如说一个人按性别分是男人，按年龄分是青年，按文化程度分是大学生，那么他就同时具有男人、青年、大学生的属性，即 class="男人 青年 大学生"

相关问答

Q1: 如何制作网站可伸缩搜索框

Wordpress自带的主题上放置了一个可以伸缩的搜索框。使用简单的几行CSS就能完成它，当然，前提条件是，你要使用支持CSS3的现代浏览器。

Q2: 如何建立一个样式新颖的CSS3搜索框64

HTML 元素像img 和input 都没有内容，所以，像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type＝“submit” 元素代替普通的input type=“submit”。这样，我们就可以用ENTER键来提交表单。

Q3: css3的选择器有哪些？

css3选择器如下：

一、通配符选择器（*）

通配符选择器是用来选择所有元素，，也可以选择某个元素下的所有元素。

二、元素选择器（E）

元素选择器，是css选择器中最常见而且最基本的选择器。

三、类选择器（.className）

类选择器是以一独立于文档元素的方式来指定样式，使用类选择器之前需要在html元素上定义类名

四、id选择器（#ID）

ID选择器和上面说的类选择器是很相似的，在使用ID选择器之前也需要先在html文档中加注ID名称，这样在样式选择器中才能找到相对应的元素，不同的是ID选择器是一个页面中唯一的值，我们在类使用时是在相对应的类名前加上一个“.”号（.className）而id选择器是在名称前使用＂#＂如（#id）,

五、后代选择器（E F）

后代选择器也被称作包含选择器，所起作用就是可以选择某元素的后代元素，比如说：E 

F，前面E为祖先元素，F为后代元素，所表达的意思就是选择了E元素的所有后代F元素，请注意他们之间需要一个空格隔开。

六、子元素选择器（Egt;F）

子元素选择器只能选择某元素的子元素，其中E为父元素，而F为子元素，其中Egt;F所表示的是选择了E元素下的所有子元素F。这和后代选择器（E 

F）不一样，在后代选择器中F是E的后代元素，而子元素选择器E gt; F，其中F仅仅是E的子元素而以。

七、相邻兄弟元素选择器（E + F）

相邻兄弟选择器可以选择紧接在另一元素后的元素，而且他们具有一个相同的父元素，换句话说，EF两元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻，这样我们就可以使用相邻兄弟元素选择器来选择F元素。

Q4: css3怎么在input搜索框里添加图片

1、新建html文档。

2、书写hmtl代码。

div class="container"

div id="search"

label for="search"点击查看效果（a href="#" target="_blank"11111111111/a）:/label

input type="text" name="q"

input class="button" type="submit" value="Search"

/div

/div

3、书写css代码。

style

body { background-color: #f1f1f1; margin: 0; }

body,  input,  button { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }

.container { margin: 30px auto 40px auto; width: 800px; text-align: center; }

a { color: #4183c4; text-decoration: none; font-weight: bold; }

a:hover { text-decoration: underline; }

h3 { color: #666; }

ul { list-style: none; padding: 25px 0; }

li { display: inline; margin: 10px 50px 10px 0px; }

input[type=text],  input[type=password] { font-size: 13px; min-height: 32px; margin: 0;

padding: 7px 8px; outline: none; color: #333; background-color: #fff; background-repeat:

no-repeat; background-position: right center; border: 1px solid #ccc; border-radius: 3px;

box-shadow: inset 0 1px 2px rgba(0,0,0,0.075); -moz-box-sizing: border-box; box-sizing:

border-box; transition: all 0.15s ease-in; -webkit-transition: all 0.15s ease-in 0; vertical-align: middle; }

button { position: relative; display: inline-block; margin: 0; padding: 8px 15px; font-size:

13px; font-weight: bold; color: #333; text-shadow: 0 1px 0 rgba(255,255,255,0.9); white

space: nowrap; background-color: #eaeaea; background-image: -moz-linear

gradient(#fafafa, #eaeaea); background-image: -webkit-linear-gradient(#fafafa, #eaeaea);

background-image: linear-gradient(#fafafa, #eaeaea); background-repeat: repeat-x;

border-radius: 3px; border: 1px solid #ddd; border-bottom-color: #c5c5c5; box-shadow:

01px 3px rgba(0,0,0,.05); vertical-align: middle; cursor: pointer; -moz-box-sizing: border-box;

box-sizing: border-box; -webkit-touch-callout: none; -webkit-user-select: none; -khtml

user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;

webkit-appearance: none; }

.button:hover,  .button:active { background-position: 0 -15px; border-color: #ccc #ccc

#b5b5b5; }

.button:active { background-color: #dadada; border-color: #b5b5b5; background-image:

none; box-shadow: inset 0 3px 5px rgba(0,0,0,.15); }

.button:focus,  input[type=text]:focus,  input[type=password]:focus { outline: none; border

color: #51a7e8; box-shadow: inset 0 1px 2px rgba(0,0,0,.075), 0 0 5px rgba(81,167,232,.5); }

label[for=search] { display: block; text-align: left; }

#search label { font-weight: 200; padding: 5px 0; }

#search input[type=text] { font-size: 18px; width: 705px; }

#search .button { padding: 10px; width: 90px; }

/style

4、代码整体结构。

5、查看效果。

Q5: 如何建立一个样式新颖的CSS3搜索框

无论是网站还是web应用，都会为了增强用户体验而添加它，那么你是不是也想过设计一个别致的搜索框？在今天的文章中，大家将会学到如何使用伪元素来创建一个超酷的CSS3搜索框。当然在开始介绍前你也可以下载源代码或者查看在线演示。HTML举例：正如接下来你所看到的，标记很少，并且很容易理解：form class=“cf form-wrapper”input type=“text” placeholder=“Search here.。.” requiredbutton type=“submit”Search/button/form你可能注意到了HTML5的特殊属性，像placeholder和required，简介如下：.placeholder－基本上，这个属性的作用在于当文本框获得焦点之前，先在文本框里显示一个域的信息，直到获得焦点后，域的信息被隐藏。.required－这个属性说明了当前元素是表单提交中的一个必需属性。HTML5也给我们带来了一个新的type属性：type＝"search"。小贴士：HTML 元素像img 和input 都没有内容，所以，像before这样的伪元素不会为我们的搜索框呈现任何箭头。我的解决方案是使用button type＝“submit” 元素代替普通的input type=“submit”。这样，我们就可以用ENTER键来提交表单。CSS举例接下来，你将会看到demo里必要的样式：清除浮动.cf:before， .cf:after{content：“”;display:table;}.cf:after{clear:both;}.cf{zoom:1;}表单元素有前缀的属性像－moz、－box、－shadow 不包括在内，我只想让下面的代码保持干净。/* Form wrapper styling */.form-wrapper {width： 450px;padding： 15px;margin： 150px auto 50px auto;background： #444;background： rgba（0，0，0，.2）;border-radius： 10px;box-shadow： 0 1px 1px rgba（0，0，0，.4） inset， 0 1px 0 rgba（255，255，255，.2）;}/* Form text input */.form-wrapper input {width： 330px;height： 20px;padding： 10px 5px;float： left;font： bold 15px ‘lucida sans’，‘trebuchet MS’，‘Tahoma’;border： 0;background： #eee;border-radius： 3px 0 0 3px;}.form-wrapper input:focus {outline： 0;background： #fff;box-shadow： 0 0 2px rgba（0，0，0，.8） inset;}.form-wrapper input：：-webkit-input-placeholder {color： #999;font-weight： normal;font-style： italic;}.form-wrapper input：-moz-placeholder {color： #999;font-weight： normal;font-style： italic;}.form-wrapper input：-ms-input-placeholder {color： #999;font-weight： normal;font-style： italic;}/* Form submit button */.form-wrapper button {overflow： visible;position： relative;float： right;border： 0;padding： 0;cursor： pointer;height： 40px;width： 110px;font： bold 15px/40px ‘lucida sans’，‘trebuchet MS’，‘Tahoma’;color： #fff;text-transform： uppercase;background： #d83c3c;border-radius： 0 3px 3px 0;text-shadow： 0 -1px 0 rgba（0， 0 ，0， .3）;}.form-wrapper button:hover{background： #e54040;}.form-wrapper button:active，.form-wrapper button:focus{background： #c42f2f;outline： 0;}.form-wrapper button:before { /* left arrow */content： ‘’;position： absolute;border-width： 8px 8px 8px 0;border-style： solid solid solid none;border-color： transparent #d83c3c transparent;top： 12px;left： -6px;}.form-wrapper button:hover:before{border-right-color： #e54040;}.form-wrapper button:focus:before，.form-wrapper button:active:before{border-right-color： #c42f2f;}.form-wrapper button：：-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */border： 0;padding： 0;}希望大家能喜欢这个教程，并且期待你们的反馈。