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()中四个值都是按照左上角为参考点来计算值。其中中间两个值就是剪切后对象的宽度和高度。