首页 > Web开发 > 详细

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

时间:2020-09-12 23:48:22      阅读:184      评论:0      收藏:0      [点我收藏+]

今天开发时突然想写blog了,水一下(o?v?)ノ

css代码

.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框

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

效果图

技术分享图片

不可编辑状态

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框

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

效果图

技术分享图片

 

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

原文:https://www.cnblogs.com/dalingxuan/p/13659247.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!