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>

enter image description here

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.....*/
}
....

这是一个有效的Example

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

Answer 5

表单元素UI在某种程度上受浏览器和操作系统的控制，因此以一种在所有常见浏览器/操作系统组合中看起来相同的方式非常可靠地设置它们并非易事。

相反，如果你想要特定的东西，我建议使用一个为你提供可设置样式元素的库。 uniform.js就是这样一个图书馆。

Answer 6

为了获得可靠性，我建议给类名称或id s赋予样式元素（理想情况下为文本输入的class，因为可能有几个）和一个{ {1}}提交按钮（虽然id也可以）：

class

使用CSS：

<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>

对于更多最新的浏览器，您可以按属性选择（使用相同的HTML）：

.textInput {
    /* styles the text input elements with this class */
}

#submitBtn {
    /* styles the submit button */
}

你也可以使用兄弟组合器（因为样式的文本输入似乎总是遵循.input { /* styles all input elements */ } .input[type="text"] { /* styles all inputs with type 'text' */ } .input[type="submit"] { /* styles all inputs with type 'submit' */ }元素，并且提交遵循textarea（但这是相当脆弱的））：

label

Answer 7

在设置输入类型提交样式时，请使用以下代码。

   input[type=submit] {
    background-color: pink; //Example stlying
    }

Answer 8

实际上，这也很有效。

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;
             }

Answer 9

我是根据这里给出的答案这样做的，我希望它有所帮助

test

Answer 10

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;
}

Answer 11

<input type="submit" style="background: red;" value="PRIVATE">

最后一个在 CSS hi-jack 中被击中的地方。丑但安全。最快也最难改变。是的。

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

11 个答案: