您的位置:首页> 前端教程> CSS教程
文章导航

CSS :optional 选择器

2019-3-30 21:13| 作者: admin| 查看: 510| 评论: 0|来自: 蚂蚁部落

optional翻译成汉语具有"可选"的意思。

名副其实,此选择器可以匹配非必需表单元素。

所谓非必需表单元素,也就是不具有required属性的表单元素。

语法结构:

[CSS] 纯文本查看 复制代码
E:optional { Rules }

特别说明:E是一个选择器,匹配的必须是表单元素。

浏览器支持:

(1).IE9+浏览器支持此选择器。

(2).edge浏览器支持此选择器。

(3).谷歌浏览器支持此选择器。

(4).火狐浏览器支持此选择器。

(5).opera浏览器支持此选择器。

(6).safria浏览器支持此选择器。

代码实例如下:

[HTML] 纯文本查看 复制代码运行代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>蚂蚁部落</title>
<style>
body{margin:20px;}
input:optional {
  background-color: #ccc;
} 
</style>   
</head>
<body>
<form action="#" method="post">
  <input type="text" required><br/>
  <input type="text"><br/>
  <input type="submit" id="bt" value="提交表单"/>
</form>
</body>
</html>

上述代码可以匹配不具有required属性的文本框,截图如下:

a:3:{s:3:\"pic\";s:43:\"portal/201903/30/211358s5s7027qz82fq4uq.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

第二个文本框不具有required属性,所以它的背景颜色被设置为#ccc。

1

鲜花

握手

雷人

路过

鸡蛋

刚表态过的朋友 (1 人)

最新评论

返回顶部