根据input的type来控制css样式
来源:互联网 发布:linux网站管理系统限速 编辑:程序博客网 时间:2024/06/03 13:54
<style type="text/css">
/*
根据input的type来控制css样式
*/
/*
1.用css的expression判断表达式
优点:简单,轻量级
缺点:expression判断表达式FireFox是不支持的。致命的是只能区分出一个(例如例子中就只能区分出text文本框),不要试图设置多个,下面的会将上面的覆盖掉
input
{
background-color:expression(this.type=="text"?'#FFC':'#eee');
}
*/
/*
2.用css中的type选择器
优点:简单,明了,可以分区出各个input控件形态。
缺点:type选择器,IE6之前的对web标准支持的不太好的浏览器不能支持
input[type="text"]
{
background-color:aquamarine;
}
input[type="password"]
{
background-color:bisque;
}
input[type="submit"]
{
background-color:blueviolet;
}
input[type="reset"]
{
background-color:chocolate;
}
input[type="radio"]
{
background-color:darkcyan;
}
input[type="checkbox"]
{
background-color:dodgerblue;
}
input[type="button"]
{
background-color:purple;
}
*/
</style>
<script type="text/javascript">
/*
3.用javascript脚本实现
优点:可以分区出各个input控件形态。
缺点:技术牵扯面教广,因为用js后期处理,所以在js没有起作用之前,各个input还是原始状态较致命的是FireFox不支持
*/
function GetCss(obj)
{
var colorArr=new Array("aliceblue","antiquewhite","aqua","aquamarine","darkgreen","darkslateblue","magenta","sienna");
var tpArr=new Array("text","password","submit","reset","radio","checkbox","button","file");
for(var i=0;i<tpArr.length;i++)
{
if(obj.type==tpArr[i])
{
obj.style.backgroundColor=colorArr[i];
}
}
}
function CheckType()
{
var obj = document.getElementsByTagName("input");
for (var i=0;i<obj.length;i++)
{
GetCss(obj[i]);
}
}
</script>
<form>
<input type="text" />
<br>
<br>
<input type="password"/>
<br>
<br>
<input type="submit"/>
<br>
<br>
<input type="reset"/>
<br>
<br>
<input type="radio"/>
<br>
<br>
<input type="checkbox"/>
<br>
<br>
<input type="button"/>
<br>
<br>
<input type="file" />
<br>
<br>
<input type="hidden"/>
<br>
<br>
<input type="image"/>
<br>
</form>
<script>
CheckType();
</script>
- 根据input的type来控制css样式
- 根据input的type来控制css样式
- CSS定义input的type类型样式
- input type=file后面浏览按钮的样式控制
- 设置input type=range滑块的CSS样式
- CSS分类控制input标签样式
- DIV+CSS input样式简单控制
- 如何控制input的样式
- css input[type=file] input[type=radio] input[type=checkbox]样式美化,input上传按钮美化
- input的CSS样式,分别对应不同的type的写法
- CSS按钮样式之button标签与input type=button的区别详解
- input标签submit属性,用CSS控制样式时高度不好控制的解决办法
- input type="file" 样式的模仿
- 改变input type file的默认样式
- input[type="file"]的样式修改
- 自定义input[type="radio"]的样式
- 自定义input[type=”file”]的样式
- input,type="file"的样式修改
- 2009 年度最佳 jQuery 插件
- 关于EOM(Enterprise operating model)企业经营模型
- 如何查看本机的端口号
- {smartassembly}全版本补丁
- Filter vs Listener
- 根据input的type来控制css样式
- c#教程第四课循环控制语句
- 创建网站快捷方式
- 写代码之余
- sockaddr和sockaddr_in
- repllog rapisrv eventrst rra_stm systemcpl udp2tcp wceload unload
- 判断目录、创建目录、保存文件、取得目录下文件、删除文件
- 梦的终焉II
- Adding a device from a kernel module the udev way (pi, a device that prints out the value of pi)