:enabled选择器

最新推荐文章于 2019-06-04 12:02:23 发布
最新推荐文章于 2019-06-04 12:02:23 发布
阅读量285 收藏
点赞数

在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。

示例演示

通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。

HTML代码:

<form action="#">
  <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="可用输入框"  />
  </div>
   <div>
    <label for="name">Text Input:</label>
    <input type="text" name="name" id="name" placeholder="禁用输入框"  disabled="disabled" />
  </div>
</form>  

CSS代码：

div{
  margin: 20px;
}
input[type="text"]:enabled {
  background: #ccc;
  border: 2px solid red;
  （<a href="http://www.dztcsd.com/">建筑资质代办</a>）
}

结果演示

任务

在右边CSS编辑器中的第4行输入正确代码，可用输入框设置一个#f36颜色的边框以及5px的阴影色。

<!DOCTYPEwww.dztcsd.com/ html>
<html>
<head> 
<meta charset="utf-8">
<title>属性选择器</title>
<link href="style.css" rel="stylesheet" type="text/css">
</head> 
<body>
<form action="#">
 
  <div>
    <label for="enabled">可用输入框:</label>
    <input type="text" id="enabled" />
  </div>


  <div>
    <label for="disabled">禁用输入框:</label>
    <input type="text" id="disabled" disabled="disabled" />
  </div>
  
 </form>  
 </body>
 </html>

大志天成119
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
css3新增选择器（:target选择器、 :disabled选择器、:enabled选择器）
m0_71814235的博客
07-19 419
css3新增选择器（:target选择器、 :disabled选择器、:enabled选择器
10_JQuery选择器之表单过滤器
l0510402015的博客
04-07 193
表单过滤选择器 1.可用元素选择器 * 语法： :enabled 获得可用元素 2.不可用元素选择器 * 语法： :disabled 获得不可用元素 3.选中选择器 * 语法： :checked 获得单选/复选框选中的元素 4.选中选择器 * 语法： :selected 获得下拉框选中的...
【CSS3】:enabled选择器
O(∩_∩)O
02-23 362
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 示例演示 通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。 HTML代码:      
jquery 将disabled的元素置为enabled的三种方法
ddxkjddx的专栏
06-19 657
这里发现可以采用三种的变通方法将置为disabled的元素状态改为enabled。 第一种：改变disabled的boolean状态，具体代码及解释如下： 复制代码 代码如下: $("button:eq(2)").click(function(){ var text2=$("input:text:eq(2)"); if(text2.attr("disabled")==false){ //通过设置disabled的boolean属性将第三个text输入框disabled属性置为t
jQuery中:enabled选择器用法实例
10-24
主要介绍了jQuery中:enabled选择器用法,实例分析了:enabled选择器的功能、定义及选取所有可用元素的使用技巧,需要的朋友可以参考下
JSoup CSS选择器用法大全
08-15
- `E ~ F`: 选择器 `E` 后面跟着一个或多个选择器 `F` 的元素，但不是紧邻的同级元素。 在爬虫开发中，利用这些 CSS 选择器，可以精准地定位到目标网页上的特定元素，从而提取所需信息。例如，`a[href^='http:']` ...
jQuery表单元素过滤选择器用法实例分析
10-17
`:enabled` 选择器用于匹配当前状态为启用（可用）的表单元素，如文本框、下拉列表等。这些元素的 `disabled` 属性未被设置或被设置为 `false`。以下是一个示例： ```javascript $("input.mini:enabled") ``` 这段...
CSS选择器.docx
07-15
一、基本选择器： 1. 通配选择器 (`*`)：选择所有元素，是最通用的选择器。 2. 元素选择器 (E)：通过元素名称选取特定类型的元素，如`div`选择所有`<div>`元素。 3. ID选择器 (`#idName`)：通过ID属性选取唯一元素，...
CSS :enabled 选择器
lengqingIT的博客
03-30 395
HTML 用法 <body> <h2>:enabled 选择器匹配每个启用的的元素（主要用于表单元素）</h2> <p>实例：设置所有type="text"的启用的输入元素的背景颜色</p> <form action=""> First name: <input type="text" value="半暖" /...
label标签的for属性用法
路人甲的专栏
04-24 5933
会用for属性的人就不要看了 标签的for属性格式      描述：设置或获取给定标签对象指定到的对象。一般用在输入框，单选框，复选框等地方注意for的值要与所用控件的Name值对应用实例来演示，看后就明白了item：name：男 女 当我们运行后，首先我们单击用户名时就会发现和直接单击输入框一样都可以使光标定位到输入
CSS3选择器 :enabled选择器
lorry的博客
06-04 301
在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 示例演示 通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它的背景为灰色。 HTML代码: <form action="...
CSS3属性笔记(三）
路在脚下，幸福在手中，莫贪！！！！！
05-13 418
CSS3属性笔记选择器（下） 1 :enabled选择器 在Web的表单中，有些表单元素有可用（“:enabled”）和不可用（“:disabled”）状态，比如输入框，密码框，复选框等。在默认情况之下，这些表单元素都处在可用状态。那么我们可以通过伪选择器“:enabled”对这些表单元素设置样式。 示例演示 通过“:enabled”选择器，修改文本输入框的边框为2像素的红色边框，并设置它
物联网工程_基于RFID的食堂食品安全监测系统设计.docx
07-20
物联网工程_基于RFID的食堂食品安全监测系统设计
VisualSVN-VS2022
最新发布
07-20
VisualSVN-VS2022-8.0.5.vsix SVNVS插件，使用VS自带更新速度太慢，可下载后直接安装即可
基于PSO优化的BP神经网络训练与测试matlab仿真，包括程序，注释，参考文献，操作步骤
07-20
1.版本：matlab2022A。 2.包含：程序，中文注释，参考文献，仿真操作步骤（使用windows media player播放）。 3.领域：PSO优化的BP神经网络 4.仿真效果：仿真效果可以参考博客同名文章《基于PSO优化的BP神经网络训练与测试matlab仿真》 5.内容：基于PSO优化的BP神经网络训练与测试matlab仿真。粒子群优化（Particle Swarm Optimization, PSO）结合BP（Backpropagation）神经网络是一种常见的优化方法，用于提升神经网络的学习能力和泛化能力。PSO不仅帮助BP神经网络找到了一个较好的初始解，从而可能加快了训练过程并提高了最终模型的质量，而且还能探索到更广泛的解空间，有助于避免局部最优解。 6.注意事项：注意MATLAB左侧当前文件夹路径，必须是程序所在文件夹位置，具体可以参考视频录。
超详细讲C++cout语句
07-20
超详细讲C++cout语句，专门为C++初学者录制。
java基于ssm+jsp网络安全宣传网站系统源码 带毕业论文
07-20
【资源说明】 1、开发环境：ssm框架；内含Mysql数据库；JSP技术 2、该资源包括项目的全部源码，下载可以直接使用！ 3、本项目适合作为计算机、数学、电子信息等专业的课程设计、期末大作业和毕设项目，作为参考资料学习借鉴。 4、本资源作为“参考资料”如果需要实现其他功能，需要能看懂代码，并且热爱钻研，自行调试。
CSS选择器详解：元素、关系、属性、伪元素与伪类
下面我们将详细探讨五类CSS选择器： 1. 元素选择符 - 通配符选择器（*）：可以匹配任何元素，通常用来初始化所有元素的默认样式，如设置`margin`和`padding`为0。然而，由于其作用广泛，过度使用可能会消耗大量...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值