禁用按钮或其他标签

liuscsdn

于 2019-05-06 09:30:24 发布

阅读量203

点赞数

CC 4.0 BY-SA版权

分类专栏：页面布局样式文章标签：禁用按钮 css样式模拟按钮

本文链接：https://blog.youkuaiyun.com/liuscsdn/article/details/89874238

页面布局样式专栏收录该内容

2 篇文章

订阅专栏

博客介绍了禁用按钮或其他标签的方法。对于button，可通过添加标签属性实现禁用；对于其他标签，则可添加样式来达到禁用效果，并给出了相关例子。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

标题禁用按钮或其他标签

button ：添加标签属性 `disable`

其他标签：添加样式 `style = pointer-events:none;`

例子：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .btn,button,input{
            width: 100px;
            height: 40px;
            line-height: 40px;
            color: #ffffff;
            text-align: center;
            background: linear-gradient(to bottom right,#54b8f4,#5c78eb);
            border-radius: 5px;
            margin: 10px;
            border: none;
            outline: 0;
        }
        .btn:active,input:active,button:active{
            opacity: 0.5;
        }
    </style>
</head>
<body>
	<div class="btn" style="pointer-events: none;">div 按钮</div>
	<p class="btn" style="pointer-events: none;">p 按钮</p>
	<input type="button" value="input 按钮" disabled>
	<button disabled>button 按钮</button>
</body>
</html>