vue 经过css实现输入框居中输入

时间 2020-09-13

标签 vue 经过 css 实现输入居中栏目 CSS 繁體版

原文原文链接

今天开发时忽然想写blog了，水一下(oﾟvﾟ)ノcss

css代码spa

.inputStyle {
    text-align: center;/*主要就是这个，下面的都是样式*/
    width: 6rem;
    height: 2.5rem;
    border: 1px solid #5a5e66;
    font-size: 14px;
    line-height: 48px;
    border-radius: 25px;
    outline: none　　/*outline设置为空，能够达到输入框激活状态时不出现方框*/
  }

input框code

<input class="inputStyle" v-model="form.defectTime"></input>

效果图orm

不可编辑状态blog

css代码开发

.disInputStyle{
    text-align: center;
    width: 6rem;
    height: 2.5rem;
    font-size: 14px;
    line-height: 48px;
    border-radius: 25px;
    outline: none;
    background: #F5F5F5;
    cursor: not-allowed　　/*这个实现了鼠标悬停时,为不可编辑状态*/
  }

input框rem

 <input class="disInputStyle" v-model="form.referenceTime" disabled></input>

效果图input