我正在学习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>
11 回答
http://jsfiddle.net/vfUvZ/
这是一个起点
CSS:
只需设置“提交”按钮,就像设置任何其他html元素一样 . 您可以使用 CSS attribute selector 定位不同类型的输入元素
作为一个例子你可以写
Combine with other selectors
这是一个工作Example
HTML
CSS
我建议不要使用
使用
Button专门介绍了CSS样式 . 您现在可以将渐变背景图像添加到其中,或使用CSS3渐变对其进行样式设置 .
在此处阅读有关HTML5表单结构的更多信息
干杯! .Pav
为了可靠性,我建议给类名称或
id
给样式的元素(理想情况下,文本输入为class
,因为可能有几个)和id
到提交按钮(尽管class
可以作为好):使用CSS:
对于更多最新的浏览器,您可以按属性选择(使用相同的HTML):
你也可以使用兄弟组合器(因为样式的文本输入似乎总是遵循
label
元素,并且提交遵循textarea(但这是相当脆弱的)):表单元素UI在某种程度上受浏览器和操作系统的控制,因此以一种在所有常见浏览器/操作系统组合中看起来相同的方式非常可靠地设置它们并非易事 .
相反,如果你想要一些特定的东西,我建议使用一个为你提供可设置的表单元素的库 . uniform.js就是这样一个图书馆 .
设置输入类型提交样式时,请使用以下代码 .
实际上,这也很有效 .
我是根据这里给出的答案这样做的,我希望它有所帮助
HTML
CSS样式
非常简单:
这是我测试过的 .