select标签移动端兼容

select选中事件用change,(用click会执行两次);

select标签对移动端的兼容:

.custom-selectselect{

width:100%; margin:0;

background:none;

border:1px solid transparent;

outline: none;/* Prefixed box-sizing rules necessary for older browsers */

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;/* Remove select styling */ appearance: none;

-webkit-appearance: none;/* Font size must the 16px or larger to prevent iOS page zoom on focus *//* General select styles: change as needed */

font-family: helvetica, sans-serif;

font-weight: bold;

color:#444;

padding:.6em1.9em.5em.8em;

line-height:1.3;}

.custom-select::after{

content:"";

position: absolute;

width:0px;

height:0px;

top:50%;

right:8px;

margin-top:-4px;

border:8px solid #929497;

border-width:8px5px8px;

border-color:#929497 transparent transparent transparent;

z-index:2;

pointer-events:none;

}

时间: 2024-11-05 17:25:28

select标签移动端兼容的相关文章

关于移动端meta标签和JS兼容适配

<meta http-equiv="Pragma" content="no-cache"> <meta http-equiv="Cache-Control" content="no-cache"> <meta http-equiv="Expires" content="0"> <meta name="format-detection&q

Html 中select标签的边框与右侧倒三角的去除

首先是边框的去除:可以设置属性border:none;或border:0px; 不过这还是有一个bug,不同浏览器会在选中select标签时,加上一个边框: 之后是右侧倒三角的去除:设置属性 appearance:none; 以下所有属性兼容当前主流浏览器:appearance:none; -moz-appearance:none; -ms-appearance:none; -o-appearance:none; -webkit-appearance:none; (不过对与IE浏览器这个属性好像

03_MyBatis基本查询,mapper文件的定义,测试代码的编写,resultMap配置返回值,sql片段配置,select标签标签中的内容介绍,配置使用二级缓存,使用别名的数据类型,条件查询ma

 1 PersonTestMapper.xml中的内容如下: <?xml version="1.0" encoding="UTF-8" ?> <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd"> <!-- namespace:命名空间

select设置高度的兼容问题

在IE678下,我们给select设置高度的话,里面的option无法居中,折中的兼容方式就是,我们给select的border:0:外面套一层div,这个div给他设置padding,让select居中,但是IE67个select设置的border还是有问题,所以还要加一个遮住默认边框的层(设置overfow:hidden);ff和chorme按照正常的设置line-height就可以了; IE8和IE8一下的用 <!--[if IE 8]> <![endif]--> 这种写法就

修改select默认样式,兼容IE9

前面有篇文章已经提供了如何修改select标签的默认样式,但是只能兼容到ie10,要兼容ie9只能模拟一个类似的 html结构: <div class="select_diy"> <select> <option value="产品咨询1">产品咨询1</option> <option value="产品咨询2">产品咨询2</option> <option value

video移动端兼容问题

video在各版本ios和安卓上面表现形式都有所区别,为了解决这一问题我在网上找了许多方法,看见甚至有采取重写控件的方式来解决,这里亲自尝试了一下,提供一个简单而又能解决大部分移动端兼容的方式: 给video加上 webkit-playsinline="" playsinline="" x5-playsinline="" x-webkit-airplay="allow" <video id="mpVideo&q

HTML中的&lt;select&gt;标签如何设置默认选中的选项

方法有两种. 第一种通过<select>的属性来设置选中项,此方法可以在动态语言如php在后台根据需要控制输出结果. 1 2 3 4 5 < select  id =  "sel" > < option  value = "1" >1</ option > < option  value = "2"  selected = "selected" >2</ opt

mybatis 中 sql 映射文件 select 标签以及 入 resultMap 标签的应用

1.自定义某个 javabean 的封装规则: 注:可以看到,select 标签中引用了 定义好的 resultMap 的值.resultMap 标签中的 type 为javabean 类型,id 为唯一标识.id 子标签定义主键(这样定义底层会有优化.)column 属性为字段名,property 属性为字段值. 注:可以看到测试结果没有出现问题,说明代码没有错误. 2.自定义某个 javabean 的级联属性封装: a.准备工作:mysql 数据库中,在之前 tbl_employees 表的

selenium处理select标签的下拉框

有时候我们会碰到<select></select>标签的下拉框.直接点击下拉框中的选项不一定可行.Selenium专门提供了Select类来处理下拉框. <select id="status" class="form-control valid" onchange="" name="status"> <option value=""></option&g