博客

效果如⬆️

HTML部分

const prefixCls = 'issues-detail';
<div className={`${prefixCls}-box}`}>
 <input className={`${prefixCls}-input}`} />
 <span className={`${prefixCls}-month`}>个月</span>
</div>

CSS部分

$prefixCls: 'issues-detail';
.#{$prefixCls} { 
  &-box {
    border-radius: arem(2.4);
    width: arem(52);
    height: arem(9.28);
    line-height: arem(9.28);
    margin-bottom: arem(1.6);
    position: relative;
    border: arem(0.48) solid #F5F5F5;
  }
  
  &-input {
    width: 90%;
    border:0px;
    outline:none;
    padding-left: arem(3.2);
    box-sizing: border-box;
    background-color: transparent;
    font-size: arem(2.24);
    height: arem(9.28);
    border-radius: arem(2.4);
  }
}

&-month {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    right: 6%;
    color: #adadad; 
    display: table-cell;
    white-space: nowrap; 
    padding: 7px 10px;
  }

如果想修改禁止编辑状态的input的placeholder字体，如⬇️

input:disabled {
  font-size: arem(2.56);    
  -webkit-text-fill-color: #CCA879 !important;
}