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

Question

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

172

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

1

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

8

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

4

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

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

12个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- karthi · Answer 1

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

- Saikat Chakraborty · Answer 2

非常简单：

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

这个已经测试过，可以正常工作。