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 class="inputStyle" v-model="form.defectTime"></input>
效果图
不可编辑状态
.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实现输入框居中输入的更多相关文章
- VUE实现限制输入框最多输入15个中文,或者30个英文
vue项目,输入框限制输入15个中文,或者30个英文 <input type="text" v-model="groupName" class=" ...
- 解决Vue中element-ui输入框无法输入问题
<el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...
- 从一次输入框无法输入的bug,谈如何限制输入框输入类型
bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...
- -WEBKIT-USER-SELECT:NONE导致输入框无法输入
原文:http://hicc.me/post/webkit-user-select-none-disabling-text-field.html 最近在webview中写页面的时候发现个别Androi ...
- 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。
要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...
- JavaScript控制输入框只能输入非负正整数
1.问题背景 问题:一个输入框,输入的是月份,保证输入的内容只能是非负正整数 2.JavaScript代码 function checkMonth() { $("month").k ...
- 转 移动端-webkit-user-select:none导致input/textarea输入框无法输入
移动端webview中写页面的时候发现个别Android机型会导致input.textareat输入框无法输入(键盘可以弹起,不是webView.requestFocus(View.FOCUS_DOW ...
- H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法
$(document).ready(function () { $('body').css({'height':$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页 ...
- JS实现输入框只能输入数字
键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...
随机推荐
- 如何使 pdf 文件在浏览器里面直接下载而不是打开
前言 在做需求过程中我们大概率会遇到在浏览器中下载文件的需求,如果仅仅是这个要求的话很简单,有如下两种解决方式. 第一种是通过 window 对象的 open 方法进行操作,将文件 url 直接在浏览 ...
- 2020-05-31:假如Redis里面有1亿个key,其中有10w个key是以某个固定的已知的前缀开头的,如何将它们全部找出来?
福哥答案2020-05-31: 使用keys指令可以扫出指定模式的key列表.对方接着追问:如果这个redis正在给线上的业务提供服务,那使用keys指令会有什么问题?这个时候你要回答redis关键的 ...
- SpringBoot实现本地存储文件上传及提供HTTP访问服务
笔者计划为大家介绍分布式文件系统,用于存储应用的图片.word.excel.pdf等文件.在开始介绍分布式文件系统之前,为大家介绍一下使用本机存储来存放文件资源. 二者的核心实现过程是一样的: 上传文 ...
- python爬虫之Beautiful Soup基础知识+实例
python爬虫之Beautiful Soup基础知识 Beautiful Soup是一个可以从HTML或XML文件中提取数据的python库.它能通过你喜欢的转换器实现惯用的文档导航,查找,修改文档 ...
- 几个递进的make file
春节在家写的几个递进的make file,部分有点问题.接下来 有空我要把GNU make的手册看完.不然这方面太菜了. GNU make手册 都需要make先设置环境变量BUILD_MODE为run ...
- 校内测试:T1秋末的落叶(命题人gxl)官方题解
秋末的落叶 题解 传送门:https://www.luogu.com.cn/problem/U121886 Part 1:疏通题意 首先,我们从题意和样例解释中很容易提取到以下信息: \(1.\)本题 ...
- SpringBoot整合Redis、mybatis实战,封装RedisUtils工具类,redis缓存mybatis数据 附源码
创建SpringBoot项目 在线创建方式 网址:https://start.spring.io/ 然后创建Controller.Mapper.Service包 SpringBoot整合Redis 引 ...
- Java并发--final关键字
一.final使用场景 final可以稀释变量,方法和类,用于便是修饰的内容一旦赋值之后不会再被改变,比如string类就是一个final类型的类. 二.final修饰变量 在Java中变量可以分为成 ...
- 在GitHub上删除仓库 or 项目,基操!!
创建错误或者想要抛弃某个仓库or项目,点击选择项目,选择Setting页面,左侧方框Option页拉到底: 你就可以看到一个红色的危险域,called Danger Zone,这不禁让我想到了黑子篮球 ...
- 图神经网络 PyTorch Geometric 入门教程
简介 Graph Neural Networks 简称 GNN,称为图神经网络,是深度学习中近年来一个比较受关注的领域.近年来 GNN 在学术界受到的关注越来越多,与之相关的论文数量呈上升趋势,GNN ...