css 移动端输入框

2024-11-05

移动端input“输入框”常见问题及解决方法

转自 https://www.cnblogs.com/ljx20180807/p/9837748.html 1. ios中,输入框获得焦点时,页面输入框被遮盖,定位的元素位置错乱: 当页input存在于吸顶或者吸底元素中时,用户点击输入框,输入法弹出后,fiexd失效,页面中定位好的元素随屏幕滚动. 针对这个问题,我们一起来看下以下几种方案: 方案一: Web API 接口 :scrollIntoView 的应用,将input输入框显示在可视区域. 1 // 输入框获得焦点时,元素移动到可视区域

Css——设置input输入框光标颜色

在使用 input 输入框时,我们可能会遇到需要给其设置光标颜色的情况.谷歌浏览器的默认光标颜色是黑色的,GitHub 上的光标却是白色,那么这个用 CSS 怎么改变呢? 上面描述的情景有两种实现方式: 1.使用color来实现光标的颜色是继承自当前输入框字体的颜色,所以用 color 属性即可改变: input{ color:red; } 2.使用caret-color来实现上一种方式已经修改了光标的颜色但是字体的颜色也改变了,如果只想改变光标的颜色而不改变字体的颜色那就使用 caret-

解决CSS移动端1px边框问题

移动项目开发中,安卓或者IOS等高分辨率屏幕会把1px的border渲染成2px来显示,网上搜了一下,解决方法如下: 一.利用css中的transform的缩放属性解决,推荐这个.如下面代码. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>解决1px边框问题</title> <meta name="viewport"

CSS圆角，输入框提示信息，JS查找同级元素

input { /*设置边框*/ border:1px solid #95B8E7; border-radius: 5px; /*设置圆角,IE不兼容*/ height:18px } placeholder="在此输入...“ 这个是输入框的属性设置一下就可以 ("#txt_begEND_DATE").siblings('span').eq(0) JS:找到当前元素的同级元素的第一个

css - 移动端reset汇总与注释

1.解决移动端触摸a元素,会有蓝色阴影正常状态: 点击时状态: a{ outline:none; -webkit-tap-highlight-color: rgba(,,,); } -webkit-tap-highlight-color: rgba(0,0,0,0);可以将该阴影透明化 2.对于多个图片之间会有小间隙 .imgs-box{ img{ display: block; width: %; } } 声明: 请尊重博客园原创精神,转载或使用图片请注明: 博主:xing.org1^ 出处

移动端输入框如果类型是number，用户也可以输入汉字和字母

<input type="number" id="input-age" placeholder="请输入你的年龄" /> //input 输入框,要求出入年龄,位数不能超过2位: $('#input-age').on('input',function(e){ e.preventDefault(); var a=$('#input-age').val(); var reg = /^\d+$/g; $('#input-age').attr

css 移动端图片等比显示处理

第一次写博文,心情有点小小的激动~~~~~ 刚开始做移动端项目的时候遇到了一些优化的问题,比如,打开网页在2g或者3g的情况下加载网页,刚开始渲染的时候,遇到图片文件未请求,图片的高度会为0,当然,如果你给定图片的高度的时候就不会有这样的情况,这样会出现渲染过程不平缓的情况. 类似这样. 之后查询了网上的一些相关资料,发现用rem可以实现宽度等比,但是项目已经基本完成,所以这个办法也是走不通了...@@ 最后用乐另外一种 <div class="headimg"> <

css移动端:acitve效果的实现

做移动前端也有一些日子了,一直有个问题没有解决,就是与pc端那样的一个:hover的效果,:hover是鼠标指针浮动在其上的元素的一个选择器,但因为在移动端是没有鼠标的,代替的是触摸屏,用户也不是有“鼠标指针浮动在其上的元素”的情况,有也很少. 所以取代的应该:active这个选择器,但是通过实践,发现情况不是很理想,在QQ浏览器上有时触发,有没不触发,在我mx3带自浏览器上根本没效果. 最近在看美团h5的页面时发现他们做对这个效果做得很好(这里说实话,美团网在h5这一块做得真好),看了他们代码

CSS中input输入框点击时去掉外边框方法【outline:medium;】----CSS学习

CSS 中添加 outline:medium; JS 控制焦点: $("#CUSTOM_PHONE").focus(function(event){ // this.attr("border","none"); $("#CUSTOM_PHONE").css('border-bottom','1px solid #3BC2B5'); }); $("#CUSTOM_PHONE").blur(function(e

css 移动端1px更细

1.最近写项目经常遇到4个入口菜单放在一行,然后加border:1px 在移动端显示却很粗,如下图: <div class="header"> <div class="div-block color1"> 1 </div> <div class="div-block color2"> 2 </div> <div class="div-block color3"&

怎样使用 CSS 清除 input 输入框聚焦选中时的蓝色边框?

input 输入框的聚焦选中时的边框是由 outline 属性控制的, 直接使用: input { outline: none } 即可. 如下:

vue仿移动端输入框

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> </head> <style type="text/css"> [v-cloak] { display: none; } #a { width: 500px; height: 50px; border: 1px solid #00000

CSS移动端多行显示多余省略号

/*css3 多行显示省略号,也可用于单行*/ .one-line { display: -webkit-box; overflow : hidden; text-overflow: ellipsis; -webkit-line-clamp:; -webkit-box-orient: vertical; }

CSS - 移动端常见小bug整理与解决方法总结【更新中】

常见问题总结与整理系列~ 1. border一像素在手机上看着有点粗的问题: 原理是因为:1px在手机上是使用2dp进行渲染的.换成 border: 0.5像素?是不行的! 解决方法: 把border给了元素的before或者after等伪类,然后让伪类利用css3的transform的scaleY(0.5)缩放0.5像素,这样,就能实现了. ps:小程序里的button的border也是这种方法解决得. <!doctype html> <html lang="en"

2018.7.15 解决css中input输入框点击时去掉外边框方法

.input_css{ background:no-repeat 0 0 scroll #EEEEEE; border:none; outline:medium; }

input 输入框光标错位问题、移动端输入框/input框光标错位问题、微信H5输入框/input框光标错位问题

在IOS系统下的问题: 搜索出的建议如下: 你应该是用fixed定位做的弹出框,弹出框里面有文本框.fixed在ios上兼容不友好,会造成光标乱跳.建议用better-scroll,或者用absolute定位改写弹出框. ios 10以上 fix布局会产生如下bug -- 光标溢出问题可能是Fixed布局使用的人少吧!很多人都没遇到这个坑,所以更应该推出这篇文章最后更换定位方式,完美解决此BUG. .survey-phone-box { position: absolute; top: ;

css 移动端页面，在ios中，margin-bottom 没有生效

在开发中,你会遇到各种美轮美奂的UI交互设计图,下面这种UI图,我在开发时就在布局上遇到一个小问题问题现象:ios 手机滚动到底部,底部的margin-bottom不生效,Android手机和模拟器都是正常的,虽然不是什么大bug,但是,有问题就要解决问题图片展示正常图片展示经过对比没有问题的页面,找到了原因,测试来测试去,一条不符合效果就不对, html, body { height: 100%; background: #ec4349; } // 外部包裹的元素 overflow:

移动端输入框 input 被弹出来的键盘挡住

给被挡住的input或者textarea加一个id,然后在click事件里调用下面的代码 document.querySelector('#xxx').scrollIntoView();

css改变input输入框placeholder值颜色

::-webkit-input-placeholder { /* WebKit browsers */ color: #fff; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #fff; opacity: 1; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #fff; opacity: 1; } :-ms-input-placeholder { /* Inte

css移动端适配 1px边框的解决方案

.border{ width: 100px; height: 100px; position: relative; } //加上媒体查询更严谨一些 dpr为2的设配才进行缩放,dpr为1的设备边框就是1px @media screen and (-webkit-min-device-pixel-ratio:2) { .border::after{ content: ''; position: absolute; left: 0; top: 0; border: 1px solid #000; b

移动端页面V2.0项目改版总结

移动端页面已经进行的第三次改版,这个版本遇到的最大难题就是页面跳转的问题. 项目需求: 页面上有分别有优惠估价.我要估价.历史竞拍这三个Tab选项卡,当用户点击估价,选择品牌以后,前端需要去请求品牌接口,获取品牌数据,进一步获取车系和车型. 项目实现:考虑到每个接口之间的数据传递问题.考虑把品牌车型车系的代码全部放在一个页面上.同事首先想到的是使用"前端路由" 这个东西.上网百度百度一下什么是前端路由.(可以读下这篇文字http://www.tuicool.com/articles/N

css 移动端 输入框

热门专题

css 移动端输入框