网页制作技术

2014年10月30日

CSS3提交意见输入框样式代码

做了个输入框样式,如图: 
 


CSS代码如下:  


代码如下:

#button { 
cursor:pointer; 
width:30%; 
margin:5px; 
padding:8px; 
border-radius:4px 4px 4px 4px; 
font-size:14px; 
font-weight:bold; 

input{ 
transition:all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out; 
-moz-transition: all 0.30s ease-in-out; 
border:#364f86 1px solid; 
border-radius:3px; 
outline:none; 

input:focus{ 
box-shadow:0 0 5px rgba(81, 203, 238, 1); 
-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1); 
-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1); 

textarea{ 
transition:all 0.30s ease-in-out; 
-webkit-transition: all 0.30s ease-in-out; 
-moz-transition: all 0.30s ease-in-out; 
border:#364f86 1px solid; 
border-radius:3px; 
outline:none; 

textarea:focus{ 
box-shadow:0 0 5px rgba(81, 203, 238, 1); 
-webkit-box-shadow:0 0 5px rgba(81, 203, 238, 1); 
-moz-box-shadow:0 0 5px rgba(81, 203, 238, 1); 


table代码如下: 


代码如下:

<table> 
<tr> 
<td>用户名</td> 
<td><input name="username" type="text" id="username" placeholder="用户名" style="height:25px"></input>*</td> 
</tr> 
<tr> 
<td>联系方式</td> 
<td><input name="contact" type="text" id="contact" placeholder="电话或邮件地址" style="height:25px"></input>*</td> 
</tr> 
<tr> 
<td>意见及建议</td> 
<td><textarea name="comment" id="comment" rows="9" cols="112" ></textarea></td> 
</tr> 
<tr> 
<td colspan="2"align="center"><input type="submit" id="button" value="提交" /></td> 
</tr> 
</table> 

二维码 返回顶部