form样式随笔

Input控件样式设置

       input控件用于创建各种表单输入，表单的形式由type标签属性button、checkbox、file、text、image、radio、password、submit、reset以及hidden来表现。下面来阐述一下其中几种的样式设置方法。

       input元素display：inline。

       button：有background系列属性。

方法一：可设置display:block，设置width、height来添加背景。

方法二：滑动门。（blog上有相关滑动门的介绍）

<span style=”background:url(bg_left.gif)”><span style=”background:url(bg_right.gif)”><input  type=”button” style=”background:none”></span></span>

       submit：和button 类似。

       text：和button 类似。

       radio：直接用background属性不能实现，只有加钩子span。

<span style=”background:url(bg.gif);position:absolute”></span><input type="radio" style=”position:relative; filter:alpha(opacity=0); opacity:0;z-index:2;”/>

 

　　  (bg_left.gif)　　  (bg_right.gif)        (bg.gif)

 

 

Select控件样式

       select控件创建列表框或下拉框，display:inline。

       Select控件非常顽固，很难设置样式，在ie6下由甚。

<span class="sL">

<span class="sR">

<select  style="width:150px;">

           <option value="" selected="selected">Guy</option>

           <option value="">Girl</option>

           <option value="">Male</option>

           <option value="">Female</option>

</select>

</span>

</span>

css设置：

.sL{display:block;background:url(img/select-left.png) no-repeat left top;padding-left:3px;width:150px;position:relative;left:0px ;margin-left:80px;*margin-left:0px;}

.sR{display:block;background:url(img/select-right.png) no-repeat right top; height:21px; position:relative; left:0px;}

.sR option{ background:#6E6F72;color:#fff;}

Firefox和IE7下可以这样设置：（当然，IE6下的设置也同样适用）(sel、selIE 指的是对select控件的css设置)

.sel{border:1px solid transparent;height:21px;position:absolute;left:0px;background:none;color:#fff; font:11px/13px Arial, Helvetica, sans-serif;}

IE6下可以这样设置：

.selIE{clip: rect(1px 130px 19px 3px);position:absolute;left:0px;font:11px/13px Arial, Helvetica, sans-serif;top:0px; }

 

clip属性：检索或设置对象的可视区域。可视区域外的部分是透明的。依据上-右-下-左的顺序提供自对象 左上角为(0,0)坐标计算的四个偏移数值，其中任一数值都可用 auto 替换，即此边不剪切。必须将 position 属性的值设为 absolute ，此属性方可使用。

P { clip: rect(5px, 10px, 10px, 5px); }

 

 

即rect（）中四个值都是按照左上角为参考点来计算值。其中中间两个值就是剪切后对象的宽度和高度。