如何样式输入和提交按钮与CSS? [英] How to style input and submit button with CSS?
本文介绍了如何样式输入和提交按钮与CSS?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我在学习CSS。如何使用CSS设置输入样式和提交按钮?
我试图创建类似这样的东西,但我不知道该如何去做
< form action =#method =post>
名称< input type =textplaceholder =名字/>
< input type =textplaceholder =Last name/>
电子邮件< input type =text/>
Message< input type =textarea/>
< input type =submitvalue =Send/>
< / form>
解决方案
这是一个出发点
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;
背景:#ccc;
border:0无;
光标:指针;
-webkit-border-radius:5px;
border-radius:5px;
}
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
<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>
解决方案
Here's a starting point
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;
}
这篇关于如何样式输入和提交按钮与CSS?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文