html5 表单 重置,css修改input表单默认样式重置与自定义大全

链接地址:

以下测试大部分都是在谷歌浏览器

1.隐藏input等表单的默认样式背景

textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;}

2.清除input表单number的样式

input[type=number] {

-moz-appearance:textfield;

}

input[type=number]::-webkit-inner-spin-button,

input[type=number]::-webkit-outer-spin-button {

-webkit-appearance: none;

margin:;

}

3.清除input表单checkbox的样式

3.1 修改checkbox样式

.agreement label {

cursor: pointer;

position: absolute;

width: 16px;

height: 16px;

top: 3px;

left:;

background: #eee;

border-radius: 100%;

}

.agreement label:after {

opacity: 0.2;

content: '';

position: absolute;

width: 19px;

height: 17px;

background: url(../img/Other/checkbox1.png) 0 0px;

}

.agreement label:hover::after {

opacity: 0.5;

}

.agreement input[type=checkbox]:checked+label:after {

opacity:;

}

input[type=checkbox] {

visibility: hidden;

}

4. 设置placeholder颜色

input::-webkit-input-placeholder {

color: #ccc;

}

5.去除表单后的上下小箭头

input::-webkit-outer-spin-button,

input::-webkit-inner-spin-button {

-webkit-appearance: none !important;

margin:;

}

利用CSS 修改input=radio的默认样式(改成选择框)

html部分:

css实现input表单验证

有没有办法只通过css来确定input标签是否有输入? 我有这个想法是因为我想完成一个自动补全的input部件,最基本的功能是: 如果input没有内容,这隐藏下拉框 反之,显示下拉框 我找到了一个也 ...

ios下表单disabled样式重置

在做最近的一个活动项目时,需要用到表单的disabled状态,但是在IOS下那颜色不是一般的浅,就跟没有一样,一开始通过如下样式重置: input:disabled, input[disabled]{ ...

css修改select下拉列表的默认样式

select的一些默认样式我们很难修改,比如图标的替换.接下来就说说如何修改这些默认样式: html代码:

& ...

input时间表单默认样式修改(input[type="date"])

一.时间选择的种类: HTML代码:选择日期: 选择时间:

CSS修改input[type=range]滑块样式

input[type="range"]是html5中的input标签新属性,样子如下:

css取消input、select默认样式(手机端)

IOS端: background-color:transparent; border-color:transparent; andorid端: 仅仅使用上面的代码还不够,可以发现select框在某些浏 ...

ios上表单默认样式

摘自:http://blog.sina.com.cn/s/blog_7d796c0d0102uyd2.html 可惜不能直接转到博客园. input[type="button"], ...

纯css修改复选框默认样式

input[type='checkbox']{ width: 20px; height: 20px; background-color: #fff; -webkit-appearance:none; ...

随机推荐

【Java EE 学习 24 上】【注解详解】

一.注解 1.所有的注解都是类. 2.所有的注解都是Annotation接口的子类. 接口摘要 Annotation 所有 annotation 类型都要扩展的公共接口. 3.定义方式 public ...

Oracle Forms 10g Tutorial Ebook Download - Oracle Forms Blog

A step by step tutorial for Oracle Forms 10g development. This guide is helpful for freshers in Orac ...

Java List详解

就是一种集合对象,将所有的对象集中到一起存储. list里面可以放java对象,可以直接放值. List list = new ArrayList(); list.add("AAA&quot ...

QWebView 播放网络视频

最近想看某站的VIP视频,但是网络上的软件用着都不怎么习惯,还有些要收费(收费还不如买VIP了..),所以自己研究做个网络播放器,使用的是QWebView. 1.设置WebView ui->we ...

caffe之路-SIGTERM信号捕捉

Caffe在1.0版本仅支持两种信号的处理: 1) SIGHUP 2) SIGINT SIGHUP:caffe接收到此信号后进行snapshot,并不会中断caffe的训练. SIGINT:caffe ...

selenium+python自动化测试，上传文件怎样实现

其实上传图片操作与输入框的输入是一样的,一种是在输入框中输入字符信息,一种是在输入文件格式的信息,下面是用代码实现上传文件, from selenium import webdriverfrom ti ...

vue全局引入scss文件(推荐)

...

在chrome上隐藏video的option按钮

隐藏方法: video::-webkit-media-controls{ overflow:hidden !important;}video::-webkit-media-controls-enclo ...

linux pidstat 命令详解

pidstat 概述 pidstat是sysstat工具的一个命令,用于监控全部或指定进程的cpu.内存.线程.设备IO等系统资源的占用情况.pidstat首次运行时显示自系统启动开始的各项统计信息, ...

Elasticsearch学习之SearchRequestBuilder的query类型

1. 分词的时机 对于ES来讲,可以对文档的内容进行分词(前提是设置了analyzed),也可以对输入的搜索词进行分词.对输入的搜索词进行分词时需要看下使用的什么类型的query.不同的query可能 ...