css-去除默认样式

本文介绍如何使用CSS定制页面元素的样式,包括去除select和checkbox的默认样式、禁止文本选取及创建划线效果等技巧。

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

1.去除select默认的下三角

select {-webkit-appearance: none;border-radius: 0;}

2.checkbox

去除默认样式后,选中状态勾选样式无法出现,需要设置

input {-webkit-appearance: none;border-radius: 0;}
input[type=checkbox]:checked:after{}

3.禁止用户选中文本

-webkit-user-select:none;

4.划线

<div class="kind">
<span class="price">¥120元</span>
</div>
 
.kind .price {position: relative;display: inline-block;margin:0 10px;}
.kind .price::before {content: '';width:100%;position: absolute;top:50%;left:0;border-bottom: 2px solid #333;}


### 如何移除 Vue Router 的 `router-link` 默认样式 在使用 Vue Router 时,`<router-link>` 组件会自动应用一些默认样式来实现链接功能。这些默认样式包括高亮效果和其他视觉提示。为了自定义或完全移除 `<router-link>` 的默认样式,可以采取以下几种方法: #### 方法一:覆盖默认类名 可以通过 CSS 来覆盖由 Vue Router 自动生成的 `.router-link-active` 和 `.router-link-exact-active` 类所带有的样式。 ```css /* 移除 .router-link-active 样式 */ .router-link-active { color: inherit; text-decoration: none; } /* 移除 .router-link-exact-active 样式 */ .router-link-exact-active { color: inherit; text-decoration: none; } ``` 这种方法适用于希望保留某些默认行为但又不想让其影响页面外观的情况[^1]。 #### 方法二:禁用默认激活类 可以在创建路由器实例时通过配置项关闭全局范围内的活动链接类添加功能。这将阻止任何情况下向匹配成功的 `<router-link>` 应用`.router-link-active` 或者 `.router-link-exctive-active` 类: ```javascript const router = new VueRouter({ mode: 'history', routes, linkActiveClass: '', // 清空linkActiveClass属性值 linkExactActiveClass: ''// 同样清空linkExactActiveClass属性值 }) ``` 此方式适合于整个项目都不需要使用到默认的激活状态样式的情形下采用[^2]。 #### 方法三:局部控制 对于特定场景下的单个 `<router-link>` 实例来说,在 HTML 中直接指定 `class` 属性并配合 JavaScript 动态切换所需的样式也是一种有效的解决方案。例如: ```html <!-- 使用 custom-class 替代默认样式 --> <router-link :to="{ path: '/foo' }" active-class="custom-active"> Foo </router-link> ``` 这种方式允许开发者针对不同需求灵活调整各个导航条目的表现形式而不必担心会影响到其他部分[^3]。 综上所述,以上三种方案可以根据实际开发中的具体情况进行选用,以达到最佳用户体验的同时满足设计上的美观度要求。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值