css怎么设置不可编辑-css教程-PHP中文网

css怎么设置不可编辑

藏色散人

发布： 2021-03-02 10:09:24

原创

5933人浏览过

css设置不可编辑的方法：1、通过readonly属性规定输入字段为只读实现不可编辑。2、通过disabled属性规定禁用input元素实现不可编辑。

css怎么设置不可编辑

本文操作环境：Windows7系统、HTML5&&CSS3版、Dell G3电脑。

css设置不可编辑：

1、css通过readonly属性规定输入字段为只读实现不可编辑：

<html>
<body>
<form action="/example/html/form_action.asp" method="get">
  
  <p>Name:<input type="text" name="email" /></p><p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p>
  <p>Country:<input type="text" name="country" 
  value="China" readonly="readonly" /></p>
  
  <input type="submit" value="Submit" />
</form>
<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>

登录后复制

效果图：

【推荐学习：css视频教程】

2、通过disabled属性规定应该禁用input元素实现不可编辑

<html>
<body>
<form action="/example/html/form_action.asp" method="get">
  <p>First name: <input type="text" name="fname" /></p>
  <p>Last name: <input type="text" name="lname" disabled="disabled" /></p>
                    <div class="aritcle_card">
                        <a class="aritcle_card_img" href="/xiazai/code/10664">
                            <img src="https://img.php.cn/upload/webcode/000/000/014/176319360895044.jpg" alt="Kuwebs企业网站管理系统3.1.5 UTF8">
                        </a>
                        <div class="aritcle_card_info">
                            <a href="/xiazai/code/10664">Kuwebs企业网站管理系统3.1.5 UTF8</a>
                            <p>酷纬企业网站管理系统Kuwebs是酷纬信息开发的为企业网站提供解决方案而开发的营销型网站系统。在线留言模块、常见问题模块、友情链接模块。前台采用DIV+CSS，遵循SEO标准。 1.支持中文、英文两种版本，后台可以在不同的环境下编辑中英文。 3.程序和界面分离，提供通用的PHP标准语法字段供前台调用，可以为不同的页面设置不同的风格。 5.支持google地图生成、自定义标题、自定义关键词、自定义描</p>
                            <div class="">
                                <img src="/static/images/card_xiazai.png" alt="Kuwebs企业网站管理系统3.1.5 UTF8">
                                <span>1</span>
                            </div>
                        </div>
                        <a href="/xiazai/code/10664" class="aritcle_card_btn">
                            <span>查看详情</span>
                            <img src="/static/images/cardxiayige-3.png" alt="Kuwebs企业网站管理系统3.1.5 UTF8">
                        </a>
                    </div>
                
  <input type="submit" value="Submit" />
</form>
<p>请在提交按钮上单击，输入会发送到服务器上名为 "form_action.asp" 的页面。</p>
</body>
</html>

登录后复制

效果图：