欢迎您访问 最编程 本站为您分享编程语言代码,编程技术文章!
您现在的位置是: 首页

修改本地输入框的样式,使其与 a-input 相同。

最编程 2024-05-08 07:41:48
...

由于业务需求,使用a-input 会造成 页面的卡顿 ,换成了原生的input框就好了

下面就是修改 input 的样式

加一个 class 类名

.input {
    display: inline-block;
    box-sizing: border-box;
    padding: 4px 11px;
    width: 100%;
    height: 32px; 
    font-size: 14px;
    line-height: 1.5;
    color: rgba(0, 0, 0, 0.65);
    background-color: #fff;
    background-image: none;
    border: 1px solid #d9d9d9;
    border-radius: 2px;
    transition: all .3s;
}

.input:focus {
    border-color: #40a9ff;
    border-right-width: 1px !important;
    outline: 0;
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
}
/* 禁用的时候 */
.input:disabled {
    background-color: #f5f5f5;
    border-color: #d9d9d9;
    color: rgba(0, 0, 0, 0.25);
    cursor: not-allowed;
}

.input:disabled:hover {
    border-color: #d9d9d9;
}

推荐阅读