如何使用CSS为输入框和提交按钮添加样式？

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>

- user2307683

---

https://dev59.com/1XA65IYBdhLWcg3w9DqF - gaynorvader

需要注意的重要事项是，您不能像其他元素一样对其进行样式设置。<input>标签不支持::after等样式。 - JamEngulfer

没问题。因此，我认为最好使用<button type="submit"><span>发送</span></button>。然后可以在span标签上使用::after。 - kunambi

问题可能出在<button>上，使用.addEventListener('submit')将不起作用。提交事件仅在<form>元素上触发。这可能是为什么OP需要使用表单的原因。请参见：https://dev59.com/Xo_ea4cB1Zd3GeqPLTm8 - Graciela Carrillo

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

- Nick R

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

这里有一个可用的示例

- It worked yesterday.

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

- Jayram

Answer 4

我建议不要使用

<input type='submit'>

而是使用

<button type='submit'>

Button 元素是专为 CSS 样式设计的。您可以添加渐变背景图片或使用 CSS3 渐变效果来设置样式。

了解更多有关 HTML5 表单结构的信息，请访问此处：

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

祝福您！ .Pav

- Pav

---

这非常有帮助，因为Safari for iOS可以正确地将我的样式应用于按钮，但不能应用于<input type="submit"> :) - CrushedPixel

但是这样你就不能将值指定为按钮上的文本，而是应该放在按钮标签之间 <button>文本</button>。 - GregarityNow

Answer 5

为了保证可靠性，建议为要样式化的元素添加类名或id（最好为文本输入框添加一个class，因为可能会有几个），并为提交按钮添加一个id（尽管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元素，而提交按钮则在一个文本域后面（但这种方法比较脆弱））：

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

- David Thomas

Answer 6

表单元素的UI受浏览器和操作系统的控制，因此要以一种方式对其进行样式设置以使其在所有常见的浏览器/操作系统组合中看起来相同并不是易事。

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

- eis

---

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

Answer 7

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

这是CSS劫持中最后需要修改的地方。虽然难看但很安全，也是最快速且难以更改的方式。

- idiot2.htm

---

但是，无法与限制性的内容安全策略指令一起使用。 - Syscall

啊，谢谢提醒。感激不尽 :-) - idiot2.htm

Answer 8

我是根据这里给出的答案进行操作的，希望能对您有所帮助。

.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

Answer 9

当样式化提交类型的输入时，请使用以下代码。

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

- JacobG182

Answer 10

实际上，这也非常好用。

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

---

这太糟糕了。 - Ratbert