Html 如何使用 CSS 设置输入和提交按钮的样式？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17042201/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style input and submit button with CSS?
提问by user2307683
I'm learning CSS. How to style input and submit button with CSS?
我正在学习 CSS。如何使用 CSS 设置输入和提交按钮的样式？
I'm trying create something like this but I have no idea how to do
我正在尝试创建这样的东西，但我不知道该怎么做
<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>
回答by Nick R
Here's a starting point
这是一个起点
CSS:
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;
}
回答by It worked yesterday.
Simply style your Submit button like you would style any other html element. you can target different type of input elements using CSS attribute selector
简单地设置您的提交按钮的样式，就像您设置任何其他 html 元素的样式一样。您可以使用CSS 属性选择器定位不同类型的输入元素
As an example you could write
作为一个例子，你可以写
input[type=text] {
/*your styles here.....*/
}
input[type=submit] {
/*your styles here.....*/
}
textarea{
/*your styles here.....*/
}
Combine with other selectors
与其他选择器结合
input[type=text]:hover {
/*your styles here.....*/
}
input[type=submit] > p {
/*your styles here.....*/
}
....
Here is a working Example
这是一个工作示例
回答by Jayram
HTML
HTML
<input type="submit" name="submit" value="Send" id="submit" />
CSS
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;
}
回答by Pav
I would suggest instead of using
我建议而不是使用
<input type='submit'>
<input type='submit'>
use
用
<button type='submit'>
<button type='submit'>
Button was introduced specifically bearing CSS styling in mind. You can now add the gradient background image to it or style it using CSS3 gradients.
Button 是专门为考虑 CSS 样式而引入的。您现在可以向其中添加渐变背景图像或使用 CSS3 渐变为其设置样式。
Read more on HTML5 forms structure here
在此处阅读有关 HTML5 表单结构的更多信息
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
http://www.w3.org/TR/2011/WD-html5-20110525/forms.html
Cheers! .Pav
干杯! .Pav
回答by eis
form element UI is somewhat controlled by browser and operating system, so it is not trivial to style them very reliably in a way that it would look the same in all common browser/OS combinations.
表单元素 UI 在某种程度上由浏览器和操作系统控制，因此以一种在所有常见浏览器/操作系统组合中看起来相同的方式非常可靠地设置它们的样式并非易事。
Instead, if you want something specific, I would recommend to use a library that provides you stylable form elements. uniform.jsis one such library.
相反，如果您想要一些特定的东西，我建议您使用一个为您提供可样式化表单元素的库。uniform.js就是这样的一个库。
回答by David says reinstate Monica
For reliability I'd suggest giving class-names, or ids to the elements to style (ideally a classfor the text-inputs, since there will presumably be several) and an idto the submit button (though a classwould work as well):
为了可靠性，我建议为id要样式的元素提供类名或s（最好是class文本输入的 a，因为大概有几个）和id提交按钮的an （尽管 aclass也可以）：
<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>
With the CSS:
使用 CSS：
.textInput {
/* styles the text input elements with this class */
}
#submitBtn {
/* styles the submit button */
}
For more up-to-date browsers, you can select by attributes (using the same HTML):
对于更新的浏览器，您可以按属性进行选择（使用相同的 HTML）：
.input {
/* styles all input elements */
}
.input[type="text"] {
/* styles all inputs with type 'text' */
}
.input[type="submit"] {
/* styles all inputs with type 'submit' */
}
You could also just use sibling combinators (since the text-inputs to style seem to always follow a labelelement, and the submit follows a textarea (but this is rather fragile)):
您也可以只使用兄弟组合器（因为样式的文本输入似乎总是跟随一个label元素，并且提交跟随一个文本区域（但这相当脆弱））：
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 */
}
回答by JacobG182
When styling a input type submit use the following code.
样式输入类型提交时，请使用以下代码。
input[type=submit] {
background-color: pink; //Example stlying
}
回答by Mpairwe Humphrey
Actually, this too works great.
实际上，这也很好用。
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;
}
回答by Danilo Venegas
I did it this way based on the answers given here, I hope it helps
我是根据这里给出的答案这样做的，希望对您有所帮助
.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;
}
回答by Saikat Chakraborty
Very simple:
很简单：
<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>
This is working I have tested.
这是我测试过的工作。
