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 ...
随机推荐
- Vue 引入指定目录文件夹所有的组件 require.context
require.context require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有的模块的引用,同构正则表达式匹配,然后require进 ...
- LeetCode 90 | 经典递归问题,求出所有不重复的子集II
本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第56篇文章,我们一起来看看LeetCode第90题,子集II(Subsets II). 这题的官方难度是Medi ...
- Java并发---并发理论
一.如何理解线程安全 在多线程中稍微不注意就会出现线程安全问题,那么什么是线程安全问题? 我的认识是.在多线程下代码执行的结果和预期的正确的结果不一致,该代码就是线程不安全的,否则就是线程安全的 在深 ...
- DVWA-1.9之fileupload
low级 对文件类型没有任何约束,可直接上传"一句话木马"hack.php,连接冰蝎. 一句话木马 : medium级 源代码 if( ( $uploaded_type == &q ...
- 只要动手就能学到东西4 JSON.stringify
今天在调试javascript时,需要将不可显示字符如\r\n在console显示出来,查了下,原来可以用JSON.stringify().这个方法以前也用过,但都是将javascript对象变成js ...
- Android Failed to find layer (XXX/XXX.xxActivity#0) in layer parent (no-parent).
报错: Failed to find layer (XXX/XXX.xxActivity#0) in layer parent (no-parent). 解决: 将该xxActivity复制一份到桌面 ...
- unity探索者之socket传输protobuf字节流(二)
版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6977935.html 上一篇主要说的是protobuf字节流的序列化和解析,将pr ...
- DFS【搜索1】
DFS模板 void dfs(int depth)//depth表示当前的层数(或深度) { if(depth>n)//到达叶子节点,该路已走到尽头 return; for(int i=;i&l ...
- 修改linux服务器的时区
cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime ntpdate 1.asia.pool.ntp.org 如果出现如下错误 21 Jul 01:0 ...
- AltiumDesigner画图不求人11 | 提高AD20启动速度的方法七选择手动释放工程 | 视频教程 | 你问我答
往期文章目录 AD画图不求人1 | AD20软件安装视频教程 | 含软件安装包 AD画图不求人2 | 中英文版本切换 AD画图不求人3 | 高亮模式设置 AD画图不求人4 | 双击设计文件无法启动Al ...