如何样式输入和提交按钮与 CSS？

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

870222 次浏览
小开

超文本标示语言

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

表单元素 UI 在某种程度上是由浏览器和操作系统控制的，所以以一种在所有常见的浏览器/操作系统组合中看起来都一样的方式来非常可靠地设计它们并不是一件简单的事情。

相反，如果您需要特定的内容，我建议使用一个提供可样式化表单元素的库。制服 JS就是这样一个库。

小开

简单地设置 Submit 按钮的样式，就像设置任何其他 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.....*/
}
....

这是一个工作 例子

小开

为了可靠性，我建议给元素设置类名或者 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 */
}
小开

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

超文本标示语言

<!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;
}
小开

我建议不要用

<input type='submit'>

使用

<button type='submit'>

按钮是特别引入的 CSS 样式记在心里。现在可以添加渐变背景图像或使用 CSS3渐变设置它的样式。

在这里阅读更多关于 HTML5表单结构的内容

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

干杯！ 。 Pav

小开

在对输入类型进行样式化时，请使用下面的代码。

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

很简单:

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

我已经测试过了。

小开

事实上，这个也很好用。

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

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

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

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

最后一个地方被击中的 CSS 劫机。丑陋但安全。最快和难以改变。是的。


提交答案