css3重置游览器默认样式

2024-09-08

CSS重置浏览器所有默认的样式

::-webkit-scrollbar-track-piece { width: 8px; height:8px; background-color: #f0f0f0; /* 背景色 */ } ::-webkit-scrollbar { width: 8px; height:8px; background-color: #00C0FF } ::-webkit-scrollbar-thumb { width: 8px; height:8px; background-color: seagreen

重置浏览器的默认样式（css reset）

(1)定义:首先css reset指的是重置浏览器的默认样式 (2)作用:因为现在的浏览器很多,并且每个浏览器都有自己的默认样式,这样就会导致一个页面在多个浏览器下展示产生差异,所以我们需要做一些处理使每个浏览器下展示一致,故需要css reset (3)内容:第一个:*{padding:0;margin:0;border:0;}第二个:你所用到的元素{padding:0;margin:0;border:0;},然而第一个虽然写起来简单,但是它却会将所有的标签重置,而我们可能没有必要将那么多的元

css3修改浏览器scroll默认样式

最近公司的新项目.前端样式采用的蚂蚁金服的antDesign. 比较喜欢antDesign.BootStrap一类简约大方的前端样式库. 但是在页面布局上.包括一些选择框.默认的scroll样式简直丑爆. 遂度娘资料,通过css3进行修改. /*定义滚动条高宽及背景高宽分别对应横竖滚动条的尺寸*/ ::-webkit-scrollbar { width: 4px; height: 4px; background-color: #F5F5F5; } /*定义滚动条轨道内阴影+圆角*/ ::-w

样式重置取消input默认样式

body, h1, h2, h3, h4, h5, h6, hr, p,blockquote, dl, dt, dd, ul, ol, li,pre, form, fieldset, legend, button, input, textarea, th, td, img{border:medium none;margin: 0;padding: 0;list-style-type: none;}

CSS3初学篇章_7(布局/浏览器默认样式重置)

CSS布局说到布局,就不得不提布局的核心<div>标签,它与其它标签一样,也是一个XHTML所支持的标签,专门用于布局设计的容器标签.在css布局方式中,div 是这种布局方式的核心对象,我们的页面排版不再依赖于表格, 仅从div的使用上说,做一个简单的布局只需要两样东西:div 与 css.因此我们称这种布局方式为 div + css 布局. 语义元素 <header>.<nav>.<section>.<article>.<aside&

谷歌游览器对<input type='file'> change只能响应1次解决和样式的改变

在项目过程中遇到的需要上传本地文件,file的原始控件不太美观,但是这个控件和button有点不太一样, 改变这个样式的思路就是在控件外面套一层链接,然后把file控件的透明度设置为0(透明).样式只需要对外面那层进行操作就行. html代码: <td style="text-align: left;"> <a href="javascript:;" class="file">选择文件 <input type=&qu

CSS 重置默认样式

1. 概述 1.1 说明 css重置样式主要是为了让各个浏览器的CSS样式有一个统一的基准,使HTML元素样式在跨浏览器时有一致性的效果. 备注:浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果不对css初始化往往会出现浏览器之间的页面显示差异.但是初始化样式也会对SEO有一定的影响,故初始化时尽量使影响最小. 1.2 重置文件 reset.css:传统的重置样式文件,重置清零处理来保障统一基准,如(*{ margin:0; padding:0; }). normailze.css:

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

链接地址: 伪元素表单控件默认样式重置与自定义大全 http://www.zhangxinxu.com/wordpress/?p=3381 Chrome 现在不支持通过伪元素修改 meter 元素样式了 https://trac.webkit.org/browser/trunk/Source/WebCore/css/html.css#L1003 以下测试大部分都是在谷歌浏览器 1.隐藏input等表单的默认样式背景 textarea,select,input{-webkit-appearance

重置默认样式 css reset

html { overflow-x:auto; overflow-y:scroll; } body, dl, dt, dd, ul, ol, li, pre, form, fieldset, input, p, blockquote, th, td { font-weight:400; margin:0; padding:0; } h1, h2, h3, h4, h4, h5 { margin:0; padding:0; } body { color:#666666; font-family:

默认样式重置 (css reset)

body,p,h1,h2,h3,h4,h5,h6,dl,dd,t{margin:0; font-size:12px;/* font-family:XX; */} ol,ul{list-style:none;padding:0;margin:0;}a{text-decoration:none;}img{border:none;} table{border-collapse:collapse;} 单元格间隙合并 th,td{padding:0;}重置单元格默认填充 form{margin:0} in

html5视频播放器一（改写默认样式）

一个项目用到了html5视频播放器,于是就写了一个,走了很多坑,例如在chrome中加载视频出现加载异常等先看看效果是不是感觉换不错,以下是我播放器改写样式的布局. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>CoolPlay</title> <link rel="stylesheet" href="

CSS3过渡结束监听事件,清除/修改表单元素的一些默认样式

document.querySelector('div').addEventListener('transitionEnd',function(){ console.log('过度结束') }) 如果要兼容低版本的浏览器,就添加浏览器的内核前缀 webkitTransitionEnd / mozTransitionEnd / oTransitionEnd.... 清除表单下拉框的默认样式主要是在移动端的默认样式 select::-ms-expand{display:none;} s

浏览器默认样式(user agent stylesheet)+cssreset

每种浏览器都有一套默认的样式表,即user agent stylesheet,在写网页时,没有指定的样式,按浏览器内置的样式表来渲染.这是合理的,像word中也有一些预留样式,可以让我们的排版更美观整齐.不同浏览器甚至同一浏览器不同版本的默认样式是不同的.这才带来了很多的坑,让大家用cssreset去填.. 一.浏览器默认样式了解各浏览器的默认样式能让我们对每条Reset规则的写法做到心中有数,对我们了解浏览器的差异,写各浏览器兼容的代码也有很大帮助. 所以先看看浏览器默认样式长什么样: FF

使用 CSS 去掉 iPhone 网页上按钮的超大圆角以及文本框圆角默认样式

使用 iPhone 上的浏览器去浏览网页的时候,按钮总是显示超大圆角且颜色由上而下渐变的样式,显得超级恶心,而且文本框也会有一定的圆角,但是我们自己定义 border-radius 也没有效果,经过搜索发现这是 webikt 内核浏览器通过私有属性 -webkit-appearance 对控件设置了默认样式.此时的解决办法为: input[type=submit],input[type=reset],input[type=button],input[type=text]{-webkit-appe

取消chrome浏览器下input和textarea的默认样式

最近一个细节引起了我的注意,chrome浏览器下的input和textarea在聚焦的时候都有一个黄色的边框,而且textarea还可以任意拖动放大,这是不能容忍的,影响美观不说,有时候拖动textarea还会使页面布局错乱,所以决定重置这些样式. 看代码: 取消chrome,Safria下input和textarea的聚焦边框: input,button,select,textarea{outline:none} 取消chrome下textarea可拖动放大: textarea{resize:

ExtJs计算两个DateField所间隔的月份（天数） new Date(str) IE游览器提示NaN 处理

需求:两个DateField控件,分别为开始时间和结束时间.当选择完结束时间后,自动计算这两个时间段所间隔的月或天数. 需要解决的问题: 1.直接使用Ext.getCmp('endDate').getValue()所取得的日期无法直接使用,需要使用Ext.util.Format.date()格式化 2.默认计算得到的时间差为毫秒,需要转换.1天=86400000毫秒. 3.得到的数需要使用Math.round()函数取整数. 4.为结束时间的日期控件加监听事件. 01.var serviceTi

去掉或者修改 input、select 等表单的【默认样式】

隐藏input等表单的默认样式的背景: textarea,select,input{-webkit-appearance: none; -moz-appearance: none; -o-appearance: none; appearance: none;} 让div看起来像按钮: div{appearance:button;-moz-appearance:button; /* Firefox */-webkit-appearance:button; /* Safari 和 Chrome */

火狐和google游览器的 hack独有识别 css

先来看google的: /* 这针对于webkit内核的游览器.包括苹果谷歌游览器等*/ @media screen and (-webkit-min-device-pixel-ratio:0) { #NavTools{ height:50px;} /*这里写自己的样式*/ #NavTools .OpleTV,.OpPPTV,.OpD64TV,.OpYaoYao{ height:50px;}} 火狐的: @-moz-document url-prefix() { #firefox { displ

修改radio、checkbox、select默认样式的方法

样式 radio select checkbox 兼容性现在前端页面效果日益丰富,默认的input组件样式显然已经不能满足需求.趁着这次开发的页面中有这方面的需求,在这里整理一下修改radio.checkbox.select的方法. 首先上效果图: radio and checkbox 修改radio的默认样式有两种常用的方法纯CSS 此方法需借助CSS3,关键CSS代码如下 .demo1 input[type='radio'],.demo1 input[type="checkbox&quo

Sass 默认样式库

Sass 默认初始化样式库 @charset "utf-8"; // 变量存储 // 字体Unicode编码微软雅黑:\5FAE\8F6F\96C5\9ED1 , 宋体:\5B8B\4F53 $pcFont: '\5FAE\8F6F\96C5\9ED1', '\5B8B\4F53', arial; $defaultColor: #333; $mobileFont: 'Helvetica Neue', Helvetica, STHeiTi, Microsoft YaHei, sans-

改变radio默认样式

改变radio默认样式,代码如下: <!doctype html> <html> <head> <meta charset="UTF-8"> <title>改变radio默认样式</title> <style> dd { float:left; line-height:37px; } dd:nth-child(3n+1) { text-align:right; width:164px; } input[

css3重置游览器默认样式

热门专题