Question

如何为搜索栏单独设置表单元素的样式＆amp;联系表格因为我在网站上使用它们并且它们都使用html中的表单元素。例如，见下文。感谢您的任何建议

对于网站上的搜索栏

<form>
    <input type="text" class="search rounded" placeholder="Search...">
</form>

form {
width:500px;
float: right;
margin-top: 15px;
margin-right: -180px;
}
.search {
padding:6px 15px 6px 40px;
margin:3px; 
background: url('http://localhost/wordpress3/wp-content/uploads/2015/05  
/search-icon.png') no-repeat 8px 6px; 
}

.rounded {
border-radius:15px; 
-moz-border-radius:15px; 
-webkit-border-radius:15px; 
width:188px;
height: 25px;
border: 1px solid #999999;
}

input[type=text]{
color:#000;
}

网站上的联系表格

<form>
<ul class="form-style">
<li><label>Full Name <span class="required">*</span> (required)</label>  
<input type="text" name="field1" class="field-divided"  
placeholder="First" />&nbsp;<input type="text" name="field2" 
class="field-divided" placeholder="Last" /></li>
<li>
<label>Email <span class="required">*</span> (required)</label>
<input type="email" name="field3" class="field-long" />
</li>
<li>
<label>Your Message <span class="required">*</span> (required)  
</label>
<textarea name="field5" id="field5" class="field-long field-
 textarea"></textarea>
</li>
<li>
<input type="submit" value="Submit" /> or press enter
</li>
</ul>
</form>

.form-style{
margin-left:45px;
max-width: 400px;
padding: 20px 12px 10px 5px;
font: 13px "Open Sans", sans-serif;
}
.form-style li {
padding: 0;
display: block;
list-style: none;
margin: 20px 0 0 0;
}
.form-style label{
margin:0 0 3px 0;
padding:0px;
display:block;
font-weight: bold;
}
.form-style input[type=text],
.form-style input[type=date],
.form-style input[type=datetime],
.form-style input[type=number],
.form-style input[type=search],
.form-style input[type=time],
.form-style input[type=url],
.form-style input[type=email],
textarea,
select{
box-sizing: border-box;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
border:1px solid #BEBEBE;
padding: 7px;
margin:0px;
-webkit-transition: all 0.30s ease-in-out;
-moz-transition: all 0.30s ease-in-out;
-ms-transition: all 0.30s ease-in-out;
-o-transition: all 0.30s ease-in-out;
outline: none; 
}
.form-style input[type=text]:focus,
.form-style input[type=date]:focus,
.form-style input[type=datetime]:focus,
.form-style input[type=number]:focus,
.form-style input[type=search]:focus,
.form-style input[type=time]:focus,
.form-style input[type=url]:focus,
.form-style input[type=email]:focus,
.form-style textarea:focus,
.form-style select:focus{
-moz-box-shadow: 0 0 8px #88D5E9;
-webkit-box-shadow: 0 0 8px #88D5E9;
box-shadow: 0 0 8px #88D5E9;
border: 1px solid #88D5E9;
}
.form-style .field-divided{
width: 49%;
}

.form-style .field-long{
width: 100%;
}
.form-style .field-select{
width: 100%;
}
.form-style .field-textarea{
height: 100px;
}
.form-style input[type=submit], .form-style-1 input[type=button]{
background: #4B99AD;
padding: 8px 15px 8px 15px;
border: none;
color: #fff;
}
.form-style input[type=submit]:hover, .form-style-1   
input[type=button]:hover{
background: #4691A4;
box-shadow:none;
-moz-box-shadow:none;
-webkit-box-shadow:none;
}
.form-style .required{
color:red;
}

Answer 1

为每个表单元素指定自己的ID：

<form id="searchBar>
<input type="text" class="search rounded" placeholder="Search...">

以及联系表格：

    <form id=contactForm>
your code here
</form>

然后将您的个人css应用于每个ID：

    #searchBar {
search bar css;
}

#contactForm {
contact form Css;
}

Answer 2

包装表单的元素是什么;即div，span，section，它是否有ID。如果是这样，您可以将样式作为该元素的范围，然后抓取表单。

<div id="wrapForm">
    <form>
        <input type="text" class="search rounded" placeholder="Search...">
    </form>
</div>

然后你可以这样做：

<style>
    #wrapForm>form{
        height: 80px;
        width:  200px;
        background: green;
    }
</style>

它只会以wrapForm Div中的形式为目标。

使用表单元素来设置搜索栏和样式;联系表

2 个答案: