invalid选择器有什么用-css教程-PHP中文网

invalid选择器有什么用

清浅

发布： 2019-01-26 11:36:28

原创

4333人浏览过

invalid 选择器的作用是在表单元素中输入非法值时来设定特定的样式，目的在于提醒用户所输入的值不正确

CSS中的:invalid 选择器主要用于在表单元素中的值是非法时设置指定样式。

invalid选择器有什么用

【推荐课程：CSS教程】

例：当用户输入的不是合法值时，样式会变成红色的边框

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title></title> 
<style>
input:invalid
{
	border:2px solid red;
}
</style>
</head>
<body>
<input type="email" value="" />

<p>请输入合法 e-mail 地址，查看样式变化。</p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/11087">
                            <img src="https://img.php.cn/upload/webcode/000/000/014/176491800769753.jpg" alt="DaGaoPeng(大高朋网团购程序)">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/11087">DaGaoPeng(大高朋网团购程序)</a>
                            <p>大高朋团购系统是一套Groupon模式的开源团购程序，开发的一套网团购程序，系统采用ASP+ACCESS开发的团购程序，安装超简，功能超全面，在保留大高朋团购系统版权的前提下，允许所有用户免费使用。大高朋团购系统内置多种主流在线支付接口，所有网银用户均可无障碍支付；短信发送团购券和实物团购快递发货等。  二、为什么选择大高朋团购程序系统？ 1.功能强大、细节完善 除了拥有主流团购网站功能，更特别支</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="DaGaoPeng(大高朋网团购程序)">
                                <span>0</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/11087" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="DaGaoPeng(大高朋网团购程序)">
                        </a>
                    </div>
                

</body>
</html>

登录后复制

效果图：

invalid选择器有什么用