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

我正在学习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>

。

编程
html css
11日 六月 2013 в 10:44
22 种观点

你可以使用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.....*/
}
....

下面是一个有效的[例子][1] 。

Monkey D Luffy
编辑本段答案7日 八月 2018 в 6:05
评论(0)

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; 
}
评论(0)

表单元素的用户界面在一定程度上受浏览器和操作系统的控制，因此，要以一种在所有常见的浏览器/操作系统组合中看起来都一样的方式对它们进行可靠的样式设计并不是一件容易的事。

相反，如果你想要一些特别的东西，我建议你使用一个库，为你提供可样式化的表单元素。[uniform.js]（http://opensource.audith.org/uniform/）就是这样一个库。

eis
编辑本段答案17日 九月 2017 в 7:42
评论(2)