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

146

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

— 用户名
source

8

您可以像设置其他元素一样设置样式

— Explosion Pills

1

stackoverflow.com/questions/3540380/...

— gaynorvader

6

需要注意的重要事项是，您无法像设置其他任何元素一样对它进行样式设置。<input>标签不支持::after。

— JamEngulfer

2

正确。这就是为什么我认为更可取的原因<button type="submit"><span>Send</span></button>。然后，您可以::after在span-tag 上使用。

— kunambi '18

215

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

— 尼克·R
source

67

只需像对待任何其他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.....*/
}
....

这是一个有效的例子

— 它昨天工作了。
source

25

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

— 杰拉姆
source

17

我建议不要使用

<input type='submit'>

用

<button type='submit'>

Button是专门针对CSS样式而引入的。现在，您可以向其添加渐变背景图像或使用CSS3渐变对其进行样式设置。

在此处阅读有关HTML5表单结构的更多信息

http://www.w3.org/TR/2011/WD-html5-20110525/forms.html

干杯! .Pav

— 帕夫
source

1

这非常有帮助，因为iOS的Safari可以正确地将我的样式应用于按钮，而不应用于<input type =“ submit”> :)

— CrushedPixel 2015年

但是，您不能将值指定为按钮上的文本，而不是按钮标签之间的文本<button> TEXT </ button>

— Uzebeckatrente

4

为了提高可靠性，我建议为id要设置样式的元素提供类名或s（最好class为文本输入提供a，因为可能会有多个输入），并id为Submit按钮提供a（尽管a 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 */
}

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

.input {
    /* styles all input elements */
}

.input[type="text"] {
     /* styles all inputs with type 'text' */
}

.input[type="submit"] {
     /* styles all inputs with type 'submit' */
}

您也可以只使用同级组合器（因为样式的文本输入似乎总是跟随一个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 */
}

— 大卫说恢复莫妮卡
source

4

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

相反，如果您想要特定的东西，我建议您使用可为您提供样式化表单元素的库。Uniform.js就是这样一个库。

— 埃斯
source

@BalinKingOfMoria看起来是这样。我更新了链接。

— eis

1

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

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

— 雅各布·G182
source

1

实际上，这也很棒。

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

— 姆比韦·汉弗莱（Mpairwe Humphrey）
source

这太糟糕了

— Ratbert

1

我是根据此处给出的答案通过这种方式完成的，希望对您有所帮助

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

— 达尼洛（Danilo Venegas）
source

0

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

— 卡蒂
source

2

如何像提交输入一样使用它？

— user2307683 2013年

0

很简单：

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

这是我测试过的作品。

— 塞卡特·查克拉博蒂
source