如何使用CSS设置输入和提交按钮的样式？

Question

我正在学习CSS.如何使用CSS设置输入和提交按钮的样式？

我正在尝试创建这样的东西,但我不知道该怎么做

<form action="#" method="post">
    Name <input type="text" placeholder="First name"/>
    <input type="text" placeholder="Last name"/>
    Email <input type="text"/>
    Message <input type="textarea"/>
    <input type="submit" value="Send"/>
</form>

Answer 1

http://jsfiddle.net/vfUvZ/

这是一个起点

CSS:

input[type=text] {
    padding:5px; 
    border:2px solid #ccc; 
    -webkit-border-radius: 5px;
    border-radius: 5px;
}

input[type=text]:focus {
    border-color:#333;
}

input[type=submit] {
    padding:5px 15px; 
    background:#ccc; 
    border:0 none;
    cursor:pointer;
    -webkit-border-radius: 5px;
    border-radius: 5px; 
}

Answer 2

只需设置"提交"按钮,就像设置任何其他html元素一样.您可以使用CSS属性选择器定位不同类型的输入元素

作为一个例子你可以写

input[type=text] {
   /*your styles here.....*/
}
input[type=submit] {
   /*your styles here.....*/
}
textarea{
   /*your styles here.....*/
}

与其他选择器结合使用

input[type=text]:hover {
   /*your styles here.....*/
}
input[type=submit] > p {
   /*your styles here.....*/
}
....

这是一个有效的例子

Answer 3

HTML

<input type="submit" name="submit" value="Send" id="submit" />

CSS

#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}

Answer 4

我建议不要使用

<input type='submit'>

使用

<button type='submit'>

Button专门介绍了CSS样式.您现在可以将渐变背景图像添加到其中,或使用CSS3渐变对其进行样式设置.

在此处阅读有关HTML5表单结构的更多信息

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

干杯! .Pav