解决ios手机中input输入框光标过长的问题
修改前css部分代码:
.receiving-info .receiving-info-list input {
display: inline-block;
width: 70%;
font-size: 14px;
color: #333;
border: none;
outline: none;
line-height: 50px;
}
修改后css部分代码:
.receiving-info .receiving-info-list input {
display: inline-block;
width: 70%;
font-size: 14px;
color: #333;
border: none;
outline: none;
line-height: 20px;
}
Android和iOS手机修改前后的效果:


其实,只是调整了line-height的大小,就解决了iOS和Android手机input光标大小不一致的问题。
解决ios手机中input输入框光标过长的问题的更多相关文章
- 解决移动端在IOS中input输入框光标过长
在输入框样式中加入: line-height:20px;
- h5 ios手机 隐藏input输入光标
前面在做一个H5中用到的6位数字密码弹框(类似支付.微信那种)时,遇到一个可怕问题,那就是在浏览器和安卓中是不显示输入光标的,但是在ios手机上光标总是能看见,像穿透一样地显示最外层. 先说下实现密码 ...
- 关于微信手机端IOS系统中input输入框无法输入的问题
如果网站不需要阻止用户的选择内容的行为就可以使用如下样式: * { -webkit-user-select: text; -user-select: text;}另一种方式: *: not(input ...
- 解决IOS safari在input focus弹出输入法时不支持position fixed的问题
该文章为转载 我们在做移动web应用的时候,常常习惯于使用position:fixed把一个input框作为提问或者搜索框固定在页面底部.但在IOS的safari和webview中,对position ...
- Css——设置input输入框光标颜色
在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式 ...
- 微信小程序优化:实现picker组件中input输入框禁止输入,而只能通过picker组件选择日期
原来的代码如下: <view class="right"> <picker mode="date" value="{{mat ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 控制input输入框光标的位置
一:理解input, textarea元素在标准浏览器下两个属性selectionStart, selectionEnd. selectionStart: 该属性的含义是 选区开始的位置: selec ...
- (谷歌浏览器等)解决css中点击input输入框时出现外边框方法【outline:medium;】
问题:在使用谷歌浏览器,360浏览器时,点击input输入框会出现带颜色的外边框,如下图所示:
随机推荐
- k8s 安装 prometheus 过程记录
开始以为只要安装 prometheus-operator 就行了. git clone https://github.com/coreos/prometheus-operator.git cd pro ...
- python3 ansible api 命令和playbook
一.api代码 # coding: utf-8 import os import sys from collections import namedtuple from ansible.parsing ...
- k8s系列---kubectl基础
kubectl get pods 查看所有pods kubectl get services 查看services kubectl replace --filename=myweb-rc.ya ...
- df du 文件空间管理 命令
df 可以查看一级文件夹大小.使用比例.档案系统及其挂入点,但对文件却无能为力. du 可以查看文件及文件夹的大小. df:常用 df -h 以易读形式显示 磁盘空间 linux ...
- 一键安装php5.6.40脚本(LAMP环境)
#!/bin/bash #安装依赖软件 yum -y install libxml2-devel curl-devel libjpeg libjpeg-devel libpng libpng-deve ...
- FakeLogonScreen抓取Windows凭证
FakeLogonScreen抓取Windows凭证 实践中使用的配置 攻击者: 操作系统: Kali Linux 2020.1 IP: 192.168.1.13 目标: 作业系统: Windows ...
- 【转载】Linux进程间通信(六):共享内存 shmget()、shmat()、shmdt()、shmctl()
来源:https://www.cnblogs.com/52php/p/5861372.html 下面将讲解进程间通信的另一种方式,使用共享内存. 一.什么是共享内存 顾名思义,共享内存就是允许两个不相 ...
- [WPF 学习] 3.用户控件库使用资源字典的困惑
项目需要(或者前后端分离的需要),前端我使用了用户控件库,由后端用代码加载和控制. 然而用户控件库没法指定资源字典,于是在用户控件的xaml文件里面手工添加了资源字典 <UserControl. ...
- Vue中的$Bus使用
Vue中的$Bus使用 将Bus单独抽离成一个文件 Bus.js import Vue from 'vue'; let Bus = new Vue(); export default Bus; 创建两 ...
- ELK学习002:Elasticsearch 7.x 的安装及配置
Elasticsearch 的安装与启动 1.1 下载 Elasticsearch 7.6.0 下载地址:https://www.elastic.co/cn/downloads/elasticsear ...