entityMap|blocks|key|2ct88|text|http://jsfiddle.net/vfUvZ/|type|unstyled|depth|inlineStyleRanges|entityRanges|data|an9is|这里是一个起点|78g21|CSS：|dfjro|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;+
}|code-block|syntax|javascript^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|M|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|N|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|O|9|@]|A|@]|B|$J|K]]]]

<a href="http://jsfiddle.net/vfUvZ/" rel="noreferrer">http://jsfiddle.net/vfUvZ/</a>

Here's a starting point

CSS:

<pre><code>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; 
}
</code></pre>

entityMap|blocks|key|73tes|text|简单地设置提交按钮的样式，就像设置任何其他html元素的样式一样。您可以使用以下命令来确定不同类型的输入元素的目标|type|unstyled|depth|inlineStyleRanges|entityRanges|data|2apgs|CSS属性选择器|b9a5a|举个例子，你可以这样写|bi5t8|input[type=text]+{
+++/*your+styles+here.....*/
}
input[type=submit]+{
+++/*your+styles+here.....*/
}
textarea{
+++/*your+styles+here.....*/
}|code-block|syntax|javascript|6lq7p|与其他选择器组合|4u6q1|input[type=text]:hover+{
+++/*your+styles+here.....*/
}
input[type=submit]+>+p+{
+++/*your+styles+here.....*/
}
....|419td|这是一个有效的|8j4km|示例^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|T|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|U|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|V|9|@]|A|@]|B|$]]|$2|G|4|H|6|I|8|W|9|@]|A|@]|B|$J|K]]|$2|L|4|M|6|7|8|X|9|@]|A|@]|B|$]]|$2|N|4|O|6|I|8|Y|9|@]|A|@]|B|$J|K]]|$2|P|4|Q|6|7|8|Z|9|@]|A|@]|B|$]]|$2|R|4|S|6|7|8|10|9|@]|A|@]|B|$]]]]

Simply style your Submit button like you would style any other html element. you can target different type of input elements using CSS attribute selector

As an example you could write 

<pre><code>input[type=text] {
 /*your styles here.....*/
}
input[type=submit] {
 /*your styles here.....*/
}
textarea{
 /*your styles here.....*/
}
</code></pre>

Combine with other selectors

<pre><code>input[type=text]:hover {
 /*your styles here.....*/
}
input[type=submit] &gt; p {
 /*your styles here.....*/
}
....
</code></pre>

Here is a working <a href="http://jsfiddle.net/5rjc7/" rel="noreferrer">Example</a>

entityMap|blocks|key|e049p|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3nkp3|CSS|15t9|#submit+{
+color:+#fff;
+font-size:+0;
+width:+135px;
+height:+60px;
+border:+none;
+margin:+0;
+padding:+0;
+background:+#0c0+url(image)+0+0+no-repeat;+
}|code-block|syntax|javascript^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|K|9|@]|A|@]|B|$]]|$2|E|4|F|6|G|8|L|9|@]|A|@]|B|$H|I]]]]

HTML

<pre><code>&lt;input type="submit" name="submit" value="Send" id="submit" /&gt;
</code></pre>

CSS

<pre><code>#submit {
 color: #fff;
 font-size: 0;
 width: 135px;
 height: 60px;
 border: none;
 margin: 0;
 padding: 0;
 background: #0c0 url(image) 0 0 no-repeat; 
}
</code></pre>

entityMap|blocks|key|a82sg|text|我建议不要使用|type|unstyled|depth|inlineStyleRanges|entityRanges|data|6fkcu|使用|ed31s|按钮的引入特别考虑了CSS样式。现在，您可以向其添加渐变背景图像或使用CSS3渐变设置其样式。|d8vgk|在此处阅读有关HTML5窗体结构的更多信息|3g1u6|1uln9|fphna|6o0on|干杯！.Pav^0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|N|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|O|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|P|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|Q|9|@]|A|@]|B|$]]|$2|I|4|-4|6|7|8|R|9|@]|A|@]|B|$]]|$2|J|4|-4|6|7|8|S|9|@]|A|@]|B|$]]|$2|K|4|-4|6|7|8|T|9|@]|A|@]|B|$]]|$2|L|4|M|6|7|8|U|9|@]|A|@]|B|$]]]]

I would suggest instead of using

<blockquote>
 <code>&lt;input type='submit'&gt;</code>
</blockquote>

use 

<blockquote>
 <code>&lt;button type='submit'&gt;</code>
</blockquote>

Button was introduced specifically bearing CSS styling in mind. You can now add the gradient background image to it or style it using CSS3 gradients. 

Read more on HTML5 forms structure here

<blockquote>
 <code>http://www.w3.org/TR/2011/WD-html5-20110525/forms.html</code>
</blockquote>

Cheers!
.Pav

entityMap|blocks|key|347t4|text|表单元素UI在某种程度上是由浏览器和操作系统控制的，因此，以一种在所有常见浏览器/OS组合中看起来都相同的方式可靠地设置它们的样式并不是一件容易的事情。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|72rid|相反，如果您想要特定的内容，我建议您使用一个库，该库为您提供了可设置样式的表单元素。|1t8cp|uniform.js|8m4uc|就是这样一个库。^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|I|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|J|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|K|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|L|9|@]|A|@]|B|$]]]]

form element UI is somewhat controlled by browser and operating system, so it is not trivial to style them very reliably in a way that it would look the same in all common browser/OS combinations.

Instead, if you want something specific, I would recommend to use a library that provides you stylable form elements. <a href="http://opensource.audith.org/uniform/" rel="nofollow noreferrer">uniform.js</a> is one such library.

entityMap|blocks|key|5ik0b|text|为了可靠性，我建议给出类名，或者|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8uta5|S设置为要设置样式的元素(理想情况下为|alb3s|对于文本输入，因为可能会有几个)和一个|uspv|添加到“提交”按钮(虽然|dnplm|也会起作用)：|50c23|Text+1
++++
++++Text+2|code-block|syntax|javascript|19hf3|使用CSS：|dumg0|.textInput+{
++++/*+styles+the+text+input+elements+with+this+class+*/
}

#submitBtn+{
++++/*+styles+the+submit+button+*/
}|a2v1r|对于更新的浏览器，您可以按属性选择(使用相同的HTML)：|47tkb|.input+{
++++/*+styles+all+input+elements+*/
}

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

.input[type="submit"]+{
+++++/*+styles+all+inputs+with+type+'submit'+*/
}|flnmq|您也可以只使用同级组合符(因为样式的文本输入似乎总是跟在|cphmn|元素，提交跟在一个文本区域之后(但这是相当脆弱的)：|boled|label+%2B+input,
label+%2B+textarea+{
++++/*+styles+input,+and+textarea,+elements+that+follow+a+label+*/
}

input+%2B+input,
textarea+%2B+input+{
++++/*+would+style+the+submit-button+in+the+above+HTML+*/
}^0|0|0|0|0|0|0|0|0|0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|13|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|14|9|@]|A|@]|B|$]]|$2|E|4|F|6|7|8|15|9|@]|A|@]|B|$]]|$2|G|4|H|6|7|8|16|9|@]|A|@]|B|$]]|$2|I|4|J|6|7|8|17|9|@]|A|@]|B|$]]|$2|K|4|L|6|M|8|18|9|@]|A|@]|B|$N|O]]|$2|P|4|Q|6|7|8|19|9|@]|A|@]|B|$]]|$2|R|4|S|6|M|8|1A|9|@]|A|@]|B|$N|O]]|$2|T|4|U|6|7|8|1B|9|@]|A|@]|B|$]]|$2|V|4|W|6|M|8|1C|9|@]|A|@]|B|$N|O]]|$2|X|4|Y|6|7|8|1D|9|@]|A|@]|B|$]]|$2|Z|4|10|6|7|8|1E|9|@]|A|@]|B|$]]|$2|11|4|12|6|M|8|1F|9|@]|A|@]|B|$N|O]]]]

For reliability I'd suggest giving class-names, or <code>id</code>s to the elements to style (ideally a <code>class</code> for the text-inputs, since there will presumably be several) and an <code>id</code> to the submit button (though a <code>class</code> would work as well):

<pre><code>&lt;form action="#" method="post"&gt;
 &lt;label for="text1"&gt;Text 1&lt;/label&gt;
 &lt;input type="text" class="textInput" id="text1" /&gt;
 &lt;label for="text2"&gt;Text 2&lt;/label&gt;
 &lt;input type="text" class="textInput" id="text2" /&gt;
 &lt;input id="submitBtn" type="submit" /&gt;
&lt;/form&gt;
</code></pre>

With the CSS:

<pre><code>.textInput {
 /* styles the text input elements with this class */
}

#submitBtn {
 /* styles the submit button */
}
</code></pre>

For more up-to-date browsers, you can select by attributes (using the same HTML):

<pre><code>.input {
 /* styles all input elements */
}

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

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

You could also just use sibling combinators (since the text-inputs to style seem to always follow a <code>label</code> element, and the submit follows a textarea (but this is rather fragile)):

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

entityMap|blocks|key|21si8|text|我是根据这里给出的答案这样做的，我希望它能有所帮助。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8ii17|.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;
++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

I did it this way based on the answers given here, I hope it helps

<pre><code>.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;
 }
</code></pre>

entityMap|blocks|key|fu13l|text|在设计输入类型submit的样式时，请使用以下代码。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|7eqgp|input[type=submit]+{
++++background-color:+pink;+//Example+stlying
++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

When styling a input type submit use the following code.

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

entityMap|blocks|key|c2tfl|text|实际上，这也很有效。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|fhda5|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;
+++++++++++++}|code-block|syntax|javascript^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|H|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|I|9|@]|A|@]|B|$F|G]]]]

Actually, this too works great.

<pre><code>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;
 }
</code></pre>

entityMap|blocks|key|10ufu|text|HTML|type|unstyled|depth|inlineStyleRanges|entityRanges|data|8qdhm|CSS3+Button




Push|code-block|syntax|javascript|9q8kv|CSS样式|c1ivt|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%25,+#398525+100%25);+/*+firefox+*/
background:+-webkit-gradient(linear,+left+top,+left+bottom,+color-stop(0%25,#8DD297),+color-stop(100%25,#398525));+/*+webkit+*/

box-shadow:+inset+0px+0px+6px+#fff;
-webkit-box-shadow:+inset+0px+0px+6px+#fff;
border:+1px+solid+#5ea617;
border-radius:+10px;
}^0|0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|L|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|M|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|N|9|@]|A|@]|B|$]]|$2|J|4|K|6|E|8|O|9|@]|A|@]|B|$F|G]]]]

HTML

<pre><code>&lt;!DOCTYPE html&gt;
&lt;html&gt;
&lt;head&gt;
&lt;meta charset="utf-8" /&gt;
&lt;title&gt;CSS3 Button&lt;/title&gt;
&lt;link href="style.css" rel="stylesheet" type="text/css" media="screen" /&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;div id="container"&gt;
&lt;a href="#" class="btn"&gt;Push&lt;/a&gt;
&lt;/div&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

CSS styling

<pre><code>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;
}
</code></pre>

entityMap|blocks|key|a30n6|text|非常简单：|type|unstyled|depth|inlineStyleRanges|entityRanges|data|91l9f|.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;+}|code-block|syntax|javascript|4cscn|这是我测试过的工作。^0|0|0^^$0|$]|1|@$2|3|4|5|6|7|8|J|9|@]|A|@]|B|$]]|$2|C|4|D|6|E|8|K|9|@]|A|@]|B|$F|G]]|$2|H|4|I|6|7|8|L|9|@]|A|@]|B|$]]]]

Very simple: 

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;head&gt;
&lt;style type="text/css"&gt;
.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; }
&lt;/style&gt;
&lt;/head&gt;
&lt;body&gt;
&lt;form&gt;
&lt;input class="buttonstyle" type="submit" name="submit" Value="Add Items"/&gt;
&lt;/form&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

This is working I have tested.

entityMap|blocks|key|fbij|text|​|type|unstyled|depth|inlineStyleRanges|entityRanges|data|e0h1a|在CSS高插孔中最后一个被击中的地方。丑陋但安全。速度最快，也很难改变。是的。^0|0^^$0|$]|1|@$2|3|4|5|6|7|8|E|9|@]|A|@]|B|$]]|$2|C|4|D|6|7|8|F|9|@]|A|@]|B|$]]]]

<code>&lt;input type=&quot;submit&quot; style=&quot;background: red;&quot; value=&quot;PRIVATE&quot;&gt;</code>
last place to be hit in a CSS hi-jack. Ugly but safe. Fastest and hard to change. yes.

I'm learning CSS. How to style input and submit button with CSS?

I'm trying create something like this but I have no idea how to do

<pre><code>&lt;form action="#" method="post"&gt;
 Name &lt;input type="text" placeholder="First name"/&gt;
 &lt;input type="text" placeholder="Last name"/&gt;
 Email &lt;input type="text"/&gt;
 Message &lt;input type="textarea"/&gt;
 &lt;input type="submit" value="Send"/&gt;
&lt;/form&gt;
</code></pre>

<img src="https://i.stack.imgur.com/jDGzD.png" alt="enter image description here">

How to style input and submit button with CSS?

HTML5

 我正在学习CSS。如何用CSS设计输入和提交按钮的样式？ 我正在尝试创建这样的东西，但我不知道该怎么做 Name         Email     Message ​  ?  ​

问如何用CSS设计输入和提交按钮的样式？
EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用CSS设计输入和提交按钮的样式？EN

回答 12

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何用CSS设计输入和提交按钮的样式？
EN