如何样式input和提交button与CSS？
我正在学习CSS。 如何样式input和提交button与CSS？
我试图创build这样的东西，但我不知道该怎么做
<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> 
这是一个起点
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; }
您可以按照样式提交button样式任何其他HTML元素。 您可以使用CSS属性select器来定位不同types的input元素
作为一个例子，你可以写
input[type=text] { your style goes here..... } input[type=submit] { your style goes here..... } textarea{ your style goes here..... }
这是一个工作的例子
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; }
我会build议，而不是使用
<input type='submit'>
使用
<button type='submit'>
Button是专门介绍CSS样式的。 您现在可以将渐变背景图像添加到它或使用CSS3渐变的样式。
请阅读HTML5表单结构
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
干杯! .Pav
为了可靠性，我build议给类名称，或者id给元素进行样式化（最好是文本input类，因为大概有几个），并且提交button是一个id （尽pipe一个class可以作为好）：
<form action="#" method="post"> <label for="text1">Text 1</label> <input type="text" class="textInput" id="text1" /> <label for="text2">Text 2</label> <input type="text" class="textInput" id="text2" /> <input id="submitBtn" type="submit" /> </form>
随着CSS：
.textInput { /* styles the text input elements with this class */ } #submitBtn { /* styles the submit button */ }
对于更新的浏览器，您可以select属性（使用相同的HTML）：
.input { /* styles all input elements */ } .input[type="text"] { /* styles all inputs with type 'text' */ } .input[type="submit"] { /* styles all inputs with type 'submit' */ }
你也可以使用兄弟组合器（因为文本input样式似乎总是遵循label元素，提交后面的textarea（但这是相当脆弱的））：
label + input, label + textarea { /* styles input, and textarea, elements that follow a label */ } input + input, textarea + input { /* would style the submit-button in the above HTML */ }
表单元素UI在某种程度上受浏览器和操作系统的控制，因此，在所有常见的浏览器/操作系统组合中，以非常可靠的方式对它们进行风格化并不是微不足道的。
相反，如果你想要特定的东西，我会build议使用一个库，为您提供可风化的表单元素。 uniform.js就是这样一个库。
样式inputtypes提交使用下面的代码。
input[type=submit] { background-color: pink; //Example stlying }
HTML
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>CSS3 Button</title> <link href="style.css" rel="stylesheet" type="text/css" media="screen" /> </head> <body> <div id="container"> <a href="#" class="btn">Push</a> </div> </body> </html>
CSS样式
a.btn { display: block; width: 250px; height: 60px; padding: 40px 0 0 0; margin: 0 auto; background: #398525; /* old browsers */ background: -moz-linear-gradient(top, #8DD297 0%, #398525 100%); /* firefox */ background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#8DD297), color-stop(100%,#398525)); /* webkit */ box-shadow: inset 0px 0px 6px #fff; -webkit-box-shadow: inset 0px 0px 6px #fff; border: 1px solid #5ea617; border-radius: 10px; }
很简单：
<html> <head> <head> <style type="text/css"> .buttonstyle { background: black; background-position: 0px -401px; border: solid 1px #000000; color: #ffffff; height: 21px; margin-top: -1px; padding-bottom: 2px; } .buttonstyle:hover {background: white;background-position: 0px -501px;color: #000000; } </style> </head> <body> <form> <input class="buttonstyle" type="submit" name="submit" Value="Add Items"/> </form> </body> </html>
这是我testing过的。
其实这也很好。
input[type=submit]{ width: 15px; position: absolute; right: 20px; bottom: 20px; background: #09c; color: #fff; font-family: tahoma,geneva,algerian; height: 30px; -webkit-border-radius: 15px; -moz-border-radius: 15px; border-radius: 15px; border: 1px solid #999; }
基于这里给出的答案，我这样做了，我希望它有帮助
.likeLink { background: none !important; color: #3387c4; border: none; padding: 0 !important; font: inherit; cursor: pointer; } .likeLink:hover { background: none !important; color: #25618c; border: none; padding: 0 !important; font: inherit; cursor: pointer; text-decoration: underline; }
