html5中如何更改、去掉input type默认样式
1、如何去掉input type=date 默认样式
HTML代码:
选择日期:<input type="date" value="2017-06-01" />
选择时间:<input type="time" value="22:52" />
选择星期:<input type="week" />
选择月份:<input type="month" />
目前WebKit下有如下9个伪元素可以改变日期控件的UI:
::-webkit-datetime-edit – 控制编辑区域的
::-webkit-datetime-edit-fields-wrapper – 控制年月日这个区域的
::-webkit-datetime-edit-text – 这是控制年月日之间的斜线或短横线的
::-webkit-datetime-edit-month-field – 控制月份
::-webkit-datetime-edit-day-field – 控制具体日子
::-webkit-datetime-edit-year-field – 控制年文字, 如2017四个字母占据的那片地方
::-webkit-inner-spin-button – 这是控制上下小箭头的
::-webkit-calendar-picker-indicator – 这是控制下拉小箭头的
::-webkit-clear-button –这是控制清除按钮的
2、去掉input type=number的默认样式
input[type=number] { -moz-appearance:textfield;}
::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0;} 控制编辑上下箭头的
::-webkit-input-placeholder 控制placeholder样式
:-moz-placeholder
::-moz-placeholder
:-ms-input-placeholder
html5中如何更改、去掉input type默认样式的更多相关文章
- html5中如何去掉input type date默认
html5中如何去掉input type date默认样式 2.对日期时间控件的样式进行修改目前WebKit下有如下9个伪元素可以改变日期控件的UI:::-webkit-datetime-edit – ...
- 【转】html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式1.时间选择的种类:HTML代码: 选择日期:<input type="date" value="2017 ...
- html5中如何去掉input type date默认样式
html5中如何去掉input type date默认样式 1.时间选择的种类: HTML代码: 选择日期:<input type="date" value="20 ...
- 【转】自定义(滑动条)input[type="range"]样式
1.如何使用滑动条? 用法很简单,如下所示: <input type="range" value="0"> 各浏览器原始样式如下: Chrome: ...
- 定制 input[type="radio"] 和 input[type="checkbox"] 样式
表单中,经常会使用到单选按钮和复选框,但是,input[type="radio"] 和 input[type="checkbox"] 的默认样式在不同的浏览器或 ...
- 移动端去掉按钮button默认样式
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...
- css input[type=file] 样式美化,input上传按钮美化
css input[type=file] 样式美化,input上传按钮美化 参考:http://www.haorooms.com/post/css_input_uploadmh
- 去掉input[type="number"]的默认样式
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ -webkit-appearance: none !importa ...
- 去掉 input type="number" 在浏览器中遗留的图标样式
input::-webkit-outer-spin-button,input::-webkit-inner-spin-button{ /* chrome */ -webkit-appeara ...
随机推荐
- <Dare To Dream>团队项目用户验收评审
实验十二 团队作业8—团队项目用户验收评审 任务1:团队作业Beta冲刺 Beta冲刺第一天:http://www.cnblogs.com/Dare-To-Dream/p/9226994.html B ...
- Docker Got permission denied while trying to connect to the Docker daemon socket at unix://
这是没有权限的原因,先将自己加入docker组,然后在重新启动就可以了, 下面参考来源:https://blog.csdn.net/weixin_40896352/article/details/80 ...
- Collections与Collection
Collection是集合体系的最顶层,包含了集合体系的共性 Collections是一个工具类,方法都是用用Collection Collections方法: //static int binary ...
- python windows环境响铃
import winsound winsound.Beep(600,1000) #其中600表示声音大小,1000表示发生时长,1000为1秒
- 错误: 找不到或无法加载主类 hello.class
今天复习Java,弄了一个helloworld,然后发现报错了,后来发现,原来执行的时候不能在后面添加.class
- Debian 9 Stretch国内常用镜像源
随着Debian 9的普及,但由于伟大的墙的存在,那就有必要整理一下国内的镜像站点. 1.使用说明 一般情况下,修改/etc/apt/sources.list文件,将Debian的默认源地址改成新的 ...
- appium 移动端自动化测试一
最近公司决定使用appium为主体框架做一个移动端得自动化测试系统,我会陆续记录项目得进展. 1.首先是appium环境得搭建, 需要安装appium-server ,appium-desktop, ...
- JVM学习01:内存结构
JVM学习01:内存结构 写在前面:本系列分享主要参考资料是 周志明老师的<深入理解Java虚拟机>第二版. 内存结构知识要点Xmind梳理 案例分析 分析1 package com.h ...
- java-27 Properties类的使用
1.Properties Properties 类表示了一个持久的属性集.Properties 可保存在流中或从流中加载.属性列表中每个键及其对应值都是一个字符串. 2.方法 setProperty( ...
- npm与cnpm的install无反应
问题描述 1.npm -v检查版本正常,npm install安装依赖提示超时 2.cnpm -v检查版本正常,cnpm install安装依赖无反应(输入命令后没有任何提示,一直卡在那) 解决(参考 ...