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

微信扫一扫,分享到朋友圈

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

今天开发时突然想写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 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 v-model="form.referenceTime" disabled></input>

效果图

微信扫一扫,分享到朋友圈

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

聚焦 Android 11: Android 11 应用兼容性

上一篇

A Simple C++ Coroutine

下一篇

你也可能喜欢

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

长按储存图像,分享给朋友