如何样式输入和提交按钮与CSS？ [英] How to style input and submit button with 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> 
  

解决方案

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; 
背景：#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>

解决方案

http://jsfiddle.net/vfUvZ/

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