苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置

今天做手机端的时候,用到input框来输入手机号码,但是在安卓手机上input的效果是正常的,在苹果手机上,input的上边框会变粗,有阴影

因为苹果手机的默认给input加上了阴影

给input加入一下代码就解决这个问题了:

input {

border: none;

outline: none;

-webkit-appearance: none;

-webkit-appearance: none;

-webkit-tap-highlight-color: rgba(0, 0, 0, 0);

}

解决完之后UI要求input的placeholder的颜色和大小,这部分使用伪类即可:

input::-webkit-input-placeholder {

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input::-moz-placeholder {                     /* Mozilla Firefox 19+ */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input:-moz-placeholder {                   /* Mozilla Firefox 4 to 18 */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

input:-ms-input-placeholder {          /* Internet Explorer 10-11 */

color: rgb(200, 200, 200);

font-size: 0.3rem;

}

原文地址:https://www.cnblogs.com/lyyguniang/p/9176852.html

时间: 2024-08-29 08:59:45

苹果手机input框上方有一条阴影线以及input框的placeholder颜色的设置的相关文章

android中在xml文件中使用View在某个控件的上方画一条线;android:listSelector的属性说明;android:visibility="gone"

一.例如RelativeLayout中android:visibility="gone" 其有三个属性:visible显示:invisible显示黑背景条:gone不显示 在类中,可以设置其显示与否,setVisibility(View.GONE);不显示 setVisibility(View.VISIBLE);显示 二. android:listSelector的属性说明 <GridView android:id="@+id/gridview_numberkeyboa

CodePush自定义更新弹框及下载进度条

CodePush 热更新之自定义更新弹框及下载进度 先来几张弹框效果图 非强制更新场景 image 强制更新场景 image 更新包下载进度效果 image 核心代码 这里的热更新Modal框,是封装成一个功能独立的组件来使用的,需不需要更新以及是否为强制更新等逻辑均在组件内实现 image UpdateComp 热更新组件核心代码如下: /** * Created by guangqiang on 2018/3/29. */ import React, {Component} from 're

列表框、分组列表框、标签(label)、分组框(fieldset)、框架(frameset)

列表框(select) 下拉列表,用户可以从一些可选项中选择. 示例:简单的下拉列表 <select name="country"> <option value="America">美国</option> <option value="China" selected="selected">中国</option> <option value="India

如何修改HTML5 input placeholder 颜色

有三种实现方式:伪元素(pseudo-elements).伪类( pseudo-classes)和Notihing. WebKit和Blink(Safari,Google Chrome, Opera15+)使用伪元素 ::-webkit-input-placeholder :-moz-placeholder ::-moz-placeholder :-ms-input-placeholder 因为每个浏览器的CSS选择器都有所差异,所以需要针对每个浏览器做单独的设定. 1 ::-webkit-in

多选框向后台传值,多选框的回显,对多选框的各种操作

1.多选框的回显: js:$(     function(){     var checkBoxAll =$("input[name^='checkbox_']");//获取前缀为checkbox_的所有多选框对象     var checkArray=${list};//获取多选框需要回显得对应的值集合     console.info("checkArray=",checkArray);     for(var i=0;i<checkArray.lengt

用css修改HTML5 input placeholder颜色

使用CSS修改HTML5 input placeholder颜色 本文选自StackOverflow(简称:SOF)精选问答汇总系列文章之一,本系列文章将为读者分享国外最优质的精彩问与答,供读者学习和了解国外最新技术.本文将为读者讲解HTML5 Input Placeholder Color的个性化设定,需要针对不同浏览器内核来编程. 问题: David Murdoch:Chrome支持input=[type=text]占位文本属性,但下列CSS样式却不起作用: CSS input[placeh

linux input输入子系统分析《四》:input子系统整体流程全面分析

1      input输入子系统整体流程 本节分析input子系统在内核中的实现,包括输入子系统(Input Core),事件处理层(Event Handler)和设备驱动层.由于上节代码讲解了设备驱动层的写法,因此在开头部分会从设备驱动层做为线索,分析输入子系统和事件处理层是如何配合的,最后从用户角度出发,从"/dev/input/*"接口如何使用输入子系统提供的服务. 既然需要详细分析,有一个这样的流程图能够帮助我们在被绕进代码的过程中,找到出口,你能够知道你现在位于代码框架的什

CSS 可视化设计模型(1)块框(Block boxex)和 行内框(Inline boxes)

包含块(Cotaining Blocks) 在CSS2.1中,很多 box 的定位和大小都根据一个名为包含块 Containing Block 的矩形盒的边缘来计算.一般地,生成的 box 会充当其后代 box 的包含块:我们称盒为其后代"创建"了包含块.说"box的包含块"即是说"box所处的包含块",而不是box所产生的包含块. 每个box会被赋予一个相对于其包含块的位置,但它不会被局限在其包含块内:它有可能溢出. <div> &

Jquery 实现input回车时跳转到下一个input元素

/** * 回车时跳转到下一个元素 * @Author HTL * @DateTime 2016-12-30T11:33:25+0800 * @param {[type]} $input [INPUT 元素列表] * @return {[type]} [description] */ function keydown_to_tab($input){ if(!$input) $input = $('input:text:not(:disabled)'); $input.bind("keydown&