elemenUI---改变部分组件样式:如 表格操作>鼠标移入高亮当前行、选中当前行样式改变,数字输入框,滚动条等

记录elementUI部分插件样式改变方式:
一、表格插件样式

  • 表格> 选中当前行样式
.el-table__body tr.current-row>td {
  color: red;
  font-weight: bold;
  background: #fad0c3 !important;
}
  • 表格> 鼠标移入高亮当前行样式
.el-table--enable-row-hover .el-table__body tr:hover>td{
  color: red;
  font-weight: bold;
  background: #fcede8 !important;
}

二、输入框样式

  • 去掉数字输入框箭头
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none !important;
}
input[type="number"] {
  -moz-appearance: textfield !important;
}
  • input type=number时,禁止鼠标滚轮改变数字(input 标签内加**@mousewheel.native.prevent @DOMMouseScroll.native.prevent** ),
    限制输入内容(oninput里加判断)
<el-input type="number" placeholder="请输入" v-model.number="branchCompanyBidFormData.secondHandMoney" size="medium" clearable oninput="if(value>10000000) value=10000000;if(value<0) value=0;" @mousewheel.native.prevent @DOMMouseScroll.native.prevent />

三、滚动条
// 全局配置 隐藏滚动条

::-webkit-scrollbar {
  display: none;
  scrollbar-width: none; /* firefox */
 -ms-overflow-style: none; /* IE 10+ */
}

// 全局配置隐藏滚动条后,想要局部显示滚动条

::-webkit-scrollbar {
    display: block !important;
    height: 10px;
    background-color: rgba(0,0,0,0.3);
  }
/*定义滚动条轨道:内阴影+圆角*/
  ::-webkit-scrollbar-track
  {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
    background-color: #F5F5F5;
  }
  /*定义滑块 内阴影+圆角*/
  ::-webkit-scrollbar-thumb
  {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
    background-color: #bbbbbb;
  }
  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值