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

CSS3选择器 :disabled选择器

:disabled”选择器刚好与“:enabled”选择器相反,用来选择不可用表单元素。要正常使用“:disabled”选择器,需要在表单元素的HTML中设置“disabled”属性。

示例演示

通过“:disabled”选择器,给不可用输入框设置明显的样式。

HTML代码:

<form action="#">
  <div>
    <input type="text" name="name" id="name" placeholder="我是可用输入框" />
  </div>
  <div>
    <input type="text" name="name" id="name" placeholder="我是不可用输入框" disabled />
  </div>
</form>  


CSS代码

form {
  margin: 50px;
}
div {
  margin-bottom: 20px;
}
input {
  background: #fff;
  padding: 10px;
  border: 1px solid orange;
  border-radius: 3px;
}
input[type="text"]:disabled {
  background: rgba(0,0,0,.15);
  border: 1px solid rgba(0,0,0,.15);
  color: rgba(0,0,0,.15);
}

结果演示:

任务

在右边CSS编辑器的第21行输入正确的代码,让不可用按钮显示为灰色。

?不会了怎么办

与上一节对比着学习哈!

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

请验证,完成请求

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

加群二维码

打开微信扫码自动绑定

您还未绑定服务号

绑定后可得到

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

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

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

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

举报

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

已采纳回答 / Deardaring4047621
:disabled  冒号前面不能有空格 -_-

已采纳回答 / qq_冲哥_0
是0.15的缩写, 行业内规范,好像是百度写的CSS 书写规范 建议把前面的0 去掉

最新回答 / 幕布斯3425392
你把下一步的disabled属性去掉,点击它,你会发现它和上一步一样都是打开当前页,因为action="#"是提交数据到本页

已采纳回答 / 叶少哲
<...code...>

最赞回答 / 慕郎_莲华
我们可以这样div:after{}, 就是对div的after设置样式, 如果有空格div :after{},意思就是给div下所有子元素的after设置样式了

已采纳回答 / Perona
供后台交互数据用的,名称可自定义。

已采纳回答 / apple2008
我的理解是background包括了border,所以因为border与background两个颜色的重叠导致border颜色比background深, color也是同理,与background两个颜色的重叠,导致color颜色比background深。

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

最新回答 / 慕移动9181930
亲,虽然with、style、color这三个属性可以相互调位置,但一般都是按照with、style、color这种顺序来。裁剪区域确定后就知道裁剪图片的位置和大小等信息,将这些信息传到后台,后台实现保存

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

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

本次提问将花费2个积分

你的积分不足,无法发表

为什么扣积分?

本次提问将花费2个积分

继续发表请点击 "确定"

为什么扣积分?

账号登录 验证码登录

遇到问题
忘记密码

代码语言