CSS3选择器:enabled 和 disabled
2015-09-15 16:08
543 查看
代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Selector</title>
<style>
input[type="text"]:enabled{
background-color: yellow;
}
input[type="text"]:disabled{
background-color: dimgrey;
}
</style>
</head>
<body>
<script>
function radio_change(){
var radio1 = document.getElementById("radio11");
var radio2 = document.getElementById("radio2");
var text = document.getElementById("text");
var p = document.getElementById("p1");
if(radio1.checked){
text.disabled="";
text.value = "hello";
p.innerHTML = "haha";
}
else{
text.value = "";
text.disabled ="disabled";
}
}
</script>
<input type="radio" id="radio11" name="radio" onchange="radio_change()">use
<input type="radio" id="radio2" name="radio" onchange="radio_change()">unuse
<input type="text" id="text" disabled>
<p id="p1"></p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>CSS3 Selector</title>
<style>
input[type="text"]:enabled{
background-color: yellow;
}
input[type="text"]:disabled{
background-color: dimgrey;
}
</style>
</head>
<body>
<script>
function radio_change(){
var radio1 = document.getElementById("radio11");
var radio2 = document.getElementById("radio2");
var text = document.getElementById("text");
var p = document.getElementById("p1");
if(radio1.checked){
text.disabled="";
text.value = "hello";
p.innerHTML = "haha";
}
else{
text.value = "";
text.disabled ="disabled";
}
}
</script>
<input type="radio" id="radio11" name="radio" onchange="radio_change()">use
<input type="radio" id="radio2" name="radio" onchange="radio_change()">unuse
<input type="text" id="text" disabled>
<p id="p1"></p>
</body>
</html>
相关文章推荐
- 纯CSS画的基本图形(矩形、圆形、三角形、多边形、爱心、八卦等)20种类型
- css-边框透明
- css学习1
- CSS选择器
- 10个顶级的CSS3代码生成器-兄弟连IT教育
- CSS相对定位|绝对定位(五)之z-index篇
- 叁、js中的css
- CSS
- CSS 相对/绝对(relative/absolute)定位系列(三)
- CSS 相对/绝对(relative/absolute)定位系列(二)
- CSS 相对|绝对(relative/absolute)定位系列(一)
- CSS 相对/绝对(relative/absolute)定位系列(四)
- Mapbox-GL样式参考
- 网页设计师必备的10个CSS技巧
- css3画三角形
- CSS中background-attachment的值
- Blog CSS
- CSS3 媒体查询
- JS+CSS实现自适应选项卡宽度的圆角滑动门效果
- JS 获取元素的属性值,非内联样式