禁用按钮或其他标签

最新推荐文章于 2021-09-16 14:56:58 发布

原创最新推荐文章于 2021-09-16 14:56:58 发布 · 214 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#禁用按钮 #css样式模拟按钮

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

2 篇文章

订阅专栏

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

标题禁用按钮或其他标签

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>