章节
问答
课签
笔记
评论
占位
占位

CSS3选择器 :read-write选择器

:read-write”选择器刚好与“:read-only”选择器相反,主要用来指定当元素处于非只读状态时的样式。

示例演示

使用“:read-write”选择器来设置不是只读控件的文本框样式。

HTML代码:

<form action="#">
  <div>
    <label for="name">姓名:</label>
    <input type="text" name="name" id="name" placeholder="大漠" />
  </div>
  <div>
    <label for="address">地址:</label>
    <input type="text" name="address" id="address" placeholder="中国上海" readonly="readonly" />
  </div>
</form>  

CSS代码:

form {
  width: 300px;
  padding: 10px;
  border: 1px solid #ccc;
  margin: 50px auto;
}
form > div {
  margin-bottom: 10px;
}

input[type="text"]{
  border: 1px solid orange;
  padding: 5px;
  background: #fff;
  border-radius: 5px;
}

input[type="text"]:-moz-read-only{
  border-color: #ccc;
}
input[type="text"]:read-only{
  border-color: #ccc;
}

input[type="text"]:-moz-read-write{
  border-color: #f36;
}
input[type="text"]:read-write{
  border-color: #f36;
}

结果演示:

任务

在CSS编辑的第25行设置不是只读控件的文本框边框为2px solid red

?不会了怎么办

:read-write”选择器刚好与“:read-only”选择器相反

||
1
2
<!DOCTYPE html>
<html>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
form {
width: 300px;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
提交
重置代码
||

请验证,完成请求

由于请求次数过多,请先验证,完成再次请求

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

  • · 粉丝专属优惠福利
  • · 大咖直播交流干货
  • · 课程更新,问题答复提醒
  • · 账号支付安全提醒

收藏课程后,能更快找到我哦~

使用 Ctrl+D 可将课程添加到书签

邀请您关注公众号
关注后,及时获悉本课程动态

举报

0/150
提交
取消
全部 精华 我要发布

已采纳回答 / Eggbeauty
input[type="text"]{} 规定类型为text的input元素的样式。input[type="text"]:-moz-read-only{}和input[type="text"]:read-only{}规定当元素处于只读状态的样式。IE9+、Opera、Google Chrome 以及 Safari 中支持 :read-only 选择器,Firefox 支持替代的:-moz-read-only。input[type="text"]:-moz-read-write{}和input[type="...

最新回答 / qq_雙葉
三个都是文本框,但是例子只设置了后两个具有readonly,第一个没有,是故意设置,成效果对比的呢

已采纳回答 / qq_滚_2
你具体要表现怎样的效果,可以直接写css的样式啊,font 选择字体的大小,样式,color字体的颜色啊,或者用伯bootstrap的框架,可以实现很多不一样的效果啊

已采纳回答 / qq_紫星幻月_0
伪元素和伪类之所以容易混淆,是因为他们的效果类似而且写法相仿。css3为了区分伪元素和伪类。伪类用一个冒号表示,伪元素用两个冒号表示。所以用一个冒号两个冒号都可以

最新回答 / qq_向着阳光走会温暖些_0
:read-only 选择器用于选取设置了 "readonly" 属性的元素。:enabled选择器用于选取可用的元素,比如:可以进行填写的文本框,文本域,其余两个也是同样的道理 

已采纳回答 / shaoliang
这个地方的id是用来写css选择器的,name是用来匹配label的

最赞回答 / Tracy_
form>div,它表示的是选择form的子代div。form div, 它表示的是选择form里面所有的div。举个例子:<form> <div id="div1"></div> <p>   <div id="div2"></div> </p></form>如果是form>div, 就选择的是div1, 因为只有id为div1的div为form的子代div如果是form div, 就选择的是div...

最新回答 / 代码有毒
好像是对的。。。

+ 我来回答 回答最高可+2积分

+ 我来回答 回答最高可+2积分
全部 我要发布
最热 最新
只看我的

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言