input CSS3伪元素 常用表单元素

1.input 提示文字颜色修改 placeholder

css

input::-webkit-input-placeholder{

color:#ddd;

}

HTML

<fieldset>
<label>*</label>
<input type="text" placeholder="请输入您的手机号码">
</fieldset>        

　　

 

知识点：

　　单冒号(:)用于CSS3伪类，双冒号(::)用于CSS3伪元素。

　　css伪类：CSS 伪类用于向某些选择器添加特殊的效果。

　　css伪元素：CSS 伪元素用于向某些选择器设置特殊效果

 

如何设置css3中placeholder的字体颜色

 

2.input 点击 轮廓变色  伪类:focus   outline

input:focus{
    outline:rgba(0,152,212,1) solid 1px;
    border-radius:0.2rem ;
}

CSS :focus 选择器   

CSS outline 属性

 

表单验证

获取input输入的值

jquery  

$('#name').val() ;

html

<input type='text' id='name'>

获取select的选中值

jquery

$('#product').val(); 选中的文字

HTML

<select id='product'>

<option></option>

</select>

 

表单验证例子

实际案例总结

ajax + php 写入数据库最简单实例

 

 

3.select 默认提示文字 

<select>

<option selected="selected"></option>

</select>

需解决

1）select提示文字 并不是默认选项

2）select和option同等宽度  option所有选择的轮廓颜色

3）下拉小箭头 向上向下 css绘制