今天开发时突然想写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实现输入框居中输入的更多相关文章

  1. VUE实现限制输入框最多输入15个中文,或者30个英文

    vue项目,输入框限制输入15个中文,或者30个英文 <input type="text" v-model="groupName" class=" ...

  2. 解决Vue中element-ui输入框无法输入问题

    <el-input placeholder="请输入内容" v-model="input3" class="input-with-select& ...

  3. 从一次输入框无法输入的bug,谈如何限制输入框输入类型

    bug的产生和修改 上周临近周末休息的时候,一个同事跑过来了,对我说:"阿伦啊,有一个页面出问题了,火狐浏览器所有的input都没法输入了."我一听,是不是你给加了什么属性,让in ...

  4. -WEBKIT-USER-SELECT:NONE导致输入框无法输入

    原文:http://hicc.me/post/webkit-user-select-none-disabling-text-field.html 最近在webview中写页面的时候发现个别Androi ...

  5. 类似智能购票的demo--进入页面后默认焦点在第一个输入框,输入内容、回车、right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个。

    要实现的效果:进入页面后默认焦点在第一个输入框,输入内容.回车.right时焦点自动跳到下一个,当跳到select时,下拉选项自动弹出,并且可以按上下键选择,选择完成后再跳到下一个. PS:自己模拟的 ...

  6. JavaScript控制输入框只能输入非负正整数

    1.问题背景 问题:一个输入框,输入的是月份,保证输入的内容只能是非负正整数 2.JavaScript代码 function checkMonth() { $("month").k ...

  7. 转 移动端-webkit-user-select:none导致input/textarea输入框无法输入

    移动端webview中写页面的时候发现个别Android机型会导致input.textareat输入框无法输入(键盘可以弹起,不是webView.requestFocus(View.FOCUS_DOW ...

  8. H5输入框在输入信息的时候 页面会变形 并且在页面不变形的时候 键盘会遮挡 输入框的解决办法

    $(document).ready(function () { $('body').css({'height':$(window).height()})});//这行是解决输入框在输入信息弹出键盘后页 ...

  9. JS实现输入框只能输入数字

    键盘下落事件实现输入框只能输入数字: <script type="text/javascript"> // 实现输入框只能输入数字 function ValidateN ...

随机推荐

  1. Vue 引入指定目录文件夹所有的组件 require.context

    require.context require.context是webpack中用来管理依赖的一个函数,此方法会生成一个上下文模块,包含目录下所有的模块的引用,同构正则表达式匹配,然后require进 ...

  2. LeetCode 90 | 经典递归问题,求出所有不重复的子集II

    本文始发于个人公众号:TechFlow,原创不易,求个关注 今天是LeetCode专题第56篇文章,我们一起来看看LeetCode第90题,子集II(Subsets II). 这题的官方难度是Medi ...

  3. Java并发---并发理论

    一.如何理解线程安全 在多线程中稍微不注意就会出现线程安全问题,那么什么是线程安全问题? 我的认识是.在多线程下代码执行的结果和预期的正确的结果不一致,该代码就是线程不安全的,否则就是线程安全的 在深 ...

  4. DVWA-1.9之fileupload

    low级 对文件类型没有任何约束,可直接上传"一句话木马"hack.php,连接冰蝎. 一句话木马 : medium级 源代码 if( ( $uploaded_type == &q ...

  5. 只要动手就能学到东西4 JSON.stringify

    今天在调试javascript时,需要将不可显示字符如\r\n在console显示出来,查了下,原来可以用JSON.stringify().这个方法以前也用过,但都是将javascript对象变成js ...

  6. 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复制一份到桌面 ...

  7. unity探索者之socket传输protobuf字节流(二)

    版权声明:本文为原创文章,转载请声明http://www.cnblogs.com/unityExplorer/p/6977935.html 上一篇主要说的是protobuf字节流的序列化和解析,将pr ...

  8. DFS【搜索1】

    DFS模板 void dfs(int depth)//depth表示当前的层数(或深度) { if(depth>n)//到达叶子节点,该路已走到尽头 return; for(int i=;i&l ...

  9. 修改linux服务器的时区

    cp /usr/share/zoneinfo/Asia/Shanghai /etc/localtime ntpdate 1.asia.pool.ntp.org 如果出现如下错误 21 Jul 01:0 ...

  10. AltiumDesigner画图不求人11 | 提高AD20启动速度的方法七选择手动释放工程 | 视频教程 | 你问我答

    往期文章目录 AD画图不求人1 | AD20软件安装视频教程 | 含软件安装包 AD画图不求人2 | 中英文版本切换 AD画图不求人3 | 高亮模式设置 AD画图不求人4 | 双击设计文件无法启动Al ...