从Chrome中提取出来的WebUI

简介:

这套UI样式是从chrome浏览器中提取出来的,是不是很眼熟?

 

  我稍微对样式进行了点修改,button按钮增加了reset按钮的支持,当ui设置为disabled,修改鼠标默认样式为禁止点击,最后对样式进行了压缩,完整代码如下:

/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
 * Use of this source code is governed by a BSD-style license that can be
 * found in the LICENSE file.
 */

button:not(.custom-appearance),input[type='button']:not(.custom-appearance),input[type='submit']:not(.custom-appearance),input[type='reset']:not(.custom-appearance){-webkit-border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-user-select:none;background:-webkit-linear-gradient(#fafafa,#f4f4f4 40%,#e5e5e5);border:1px solid #aaa;color:#444;font-size:inherit;margin-bottom:0;min-width:4em;padding:3px 12px}button:not(.custom-appearance):hover,input[type='button']:not(.custom-appearance):hover,input[type='submit']:not(.custom-appearance):hover,input[type='reset']:not(.custom-appearance):hover{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#fefefe,#f8f8f8 40%,#e9e9e9);border-color:#999;color:#222}button:not(.custom-appearance):active,input[type='button']:not(.custom-appearance):active,input[type='submit']:not(.custom-appearance):active,input[type='reset']:not(.custom-appearance):active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);background:#ebebeb -webkit-linear-gradient(#f4f4f4,#efefef 40%,#dcdcdc);color:#333}button[disabled]:not(.custom-appearance),input[type='button'][disabled]:not(.custom-appearance),input[type='submit'][disabled]:not(.custom-appearance),input[type='reset'][disabled]:not(.custom-appearance),button[disabled]:not(.custom-appearance):hover,input[type='button'][disabled]:not(.custom-appearance):hover,input[type='submit'][disabled]:not(.custom-appearance):hover,input[type='reset'][disabled]:not(.custom-appearance):hover{cursor:not-allowed;-webkit-box-shadow:none;background:-webkit-linear-gradient(#fafafa,#f4f4f4 40%,#e5e5e5);border-color:#aaa;color:#888}button:not(.custom-appearance):focus,input[type='submit']:not(.custom-appearance):focus,input[type='reset']:not(.custom-appearance):focus,input[type='text']:not(.custom-appearance):focus,select:not(.custom-appearance):focus{-webkit-box-shadow:inset 0 1px 2px white,0 1px 2px rgba(0,0,0,.2),0 0 1px #c0c0c0,0 0 1px #c0c0c0,0 0 1px #c0c0c0;-webkit-transition:border-color 200ms;border-color:#4080fa;outline:0}input[type='search']:not(.custom-appearance):focus{outline-color:#4080fa}.link-button,.link-button:focus{-webkit-box-shadow:none!important;background:transparent none!important;border:none!important;color:#15c!important;cursor:pointer;font-family:inherit;margin:0;padding:0 4px!important}.link-button:hover{text-decoration:underline}.link-button:active{color:#052577!important;text-decoration:underline}

input[type='checkbox']{-webkit-box-shadow:inset 0 1px 2px white,0 1px 2px rgba(0,0,0,.2);-webkit-appearance:none;-webkit-margin-start:0;-webkit-margin-end:3px;background:-webkit-linear-gradient(#fafafa,#dcdcdc);border-radius:3px;border:1px solid #a0a0a0;display:inline-block;height:16px;margin-bottom:0;margin-top:0;position:relative;top:3px;vertical-align:baseline;width:16px}input[type='checkbox']:disabled{cursor:not-allowed;opacity:.75}input[type='checkbox']:not(:disabled):not(:active):hover{background:-webkit-linear-gradient(#fff,#e6e6e6);text-shadow:0 1px 0 rgba(255,255,255,1)}input[type='checkbox']:not(:disabled):active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.2);background:-webkit-linear-gradient(#f0f0f0,#bebebe);border:1px solid #808080;text-shadow:0 1px 0 rgba(255,255,255,.25)}input[type='checkbox']:checked::before{color:#808080;content:url(checkmark.png);font-size:13px;height:16px;left:2px;position:absolute}input[type='radio']{-webkit-box-shadow:inset 0 1px 2px white,0 1px 2px rgba(0,0,0,.2);-webkit-appearance:none;-webkit-margin-start:0;-webkit-margin-end:3px;-webkit-transition:border 500ms;background:-webkit-linear-gradient(#fafafa,#dcdcdc);border-radius:100%;border:1px solid #a0a0a0;display:inline-block;height:15px;margin-bottom:0;position:relative;top:3px;vertical-align:baseline;width:15px}input[type='radio']:disabled{cursor:not-allowed;opacity:.75}input[type='radio']:not(:disabled):not(:active):hover{background:-webkit-linear-gradient(#fff,#e6e6e6);text-shadow:0 1px 0 rgba(255,255,255,1)}input[type='radio']:not(:disabled):active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,.2);background:-webkit-linear-gradient(#f0f0f0,#bebebe);border:1px solid #808080;text-shadow:0 1px 0 rgba(255,255,255,.25)}input[type='radio']:checked::before{-webkit-box-shadow:0 1px 0 rgba(255,255,255,.5);-webkit-margin-start:4px;background:#808080;border-radius:10px;content:'';display:inline-block;font-size:13px;font-weight:400;height:5px;left:0;margin-top:4px;opacity:1;position:absolute;top:0;vertical-align:top;width:5px}html[dir='rtl'] input[type='radio']:checked::before{right:0}input[type='radio']:active:checked::before{background:#606060}.checkbox,.radio{margin:9px 0}.checkbox label,.radio label{display:-webkit-inline-box}.checkbox label input ~ span,.radio label input ~ span{-webkit-box-flex:1;-webkit-margin-start:.4em;display:block}.checkbox label input[type=checkbox],.radio label input[type=radio]{margin-top:0;top:0;vertical-align:top}input[type='checkbox']:not(.custom-appearance):focus,input[type='radio']:not(.custom-appearance):focus{-webkit-box-shadow:inset 0 1px 2px white,0 1px 2px rgba(0,0,0,.2),0 0 1px #c0c0c0,0 0 1px #c0c0c0,0 0 1px #c0c0c0;-webkit-transition:border-color 200ms;border-color:#4080fa;outline:0}label>input[type=radio] ~ span,label>input[type=checkbox] ~ span,input[type=checkbox] ~ label{color:#444}label:hover>input[type=checkbox]:disabled ~ span,label:hover>input[type=radio]:disabled ~ span,input[type=checkbox]:disabled ~ label:hover{color:#888}label:hover>input[type=checkbox]:not(:disabled) ~ span,label:hover>input[type=radio]:not(:disabled) ~ span,input[type=checkbox]:not(:disabled) ~ label:hover{color:#222}

select{-webkit-appearance:button;-webkit-border-radius:3px;-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.1);-webkit-padding-end:20px;-webkit-padding-start:8px;-webkit-user-select:none;background-image:url(select.png),-webkit-linear-gradient(#fafafa,#f4f4f4 40%,#e5e5e5);background-position:center right;background-repeat:no-repeat;border:1px solid #aaa;color:#555;font-size:inherit;margin:0;padding-top:2px;padding-bottom:2px;text-overflow:ellipsis;white-space:nowrap}html[dir='rtl'] select{background-position:center left}select:disabled{cursor:not-allowed;color:graytext;background-image:url(disabled_select.png),-webkit-linear-gradient(#fefefe,#f8f8f8 40%,#e9e9e9)}select:enabled:hover{-webkit-box-shadow:0 1px 3px rgba(0,0,0,0.2);background-image:url(select.png),-webkit-linear-gradient(#fefefe,#f8f8f8 40%,#e9e9e9);color:#333}select:enabled:active{-webkit-box-shadow:inset 0 1px 3px rgba(0,0,0,0.2);background-image:url(select.png),-webkit-linear-gradient(#f4f4f4,#efefef 40%,#dcdcdc);color:#444}

  需要注意一点,这个只能在chrome下显示,所以使用前请慎重。

  下载地址:http://files.cnblogs.com/hooray/chromeUI.zip


    本文转自胡尐睿丶博客园博客,原文链接:http://www.cnblogs.com/hooray/archive/2012/08/02/2619493.html,如需转载请自行联系原作者



相关文章
|
4月前
|
存储 数据可视化 定位技术
Google Earth Engine谷歌地球引擎GEE栅格数据图层可视化设置代码嵌入
Google Earth Engine谷歌地球引擎GEE栅格数据图层可视化设置代码嵌入
|
4月前
|
Web App开发
GOOGLE chrome浏览器 非插件截图方法
emm...不知道大家知不知道,反正不管怎么样,我就拿来水一下 打开chrome 哦~ 右键审查元素 or F12 or ctrl+shit+i or 你自己设置的快捷键... 然后再ctrl+shit+p
127 0
|
5月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
使用 Chrome 开发者工具去除某些网站上无法关闭的模态对话框
39 0
|
6月前
|
数据采集 存储 中间件
Amazon图片下载器:利用Scrapy库完成图像下载任务
本文介绍了如何使用Python的Scrapy库编写一个简单的爬虫程序,实现从Amazon网站下载商品图片的功能。Scrapy是一个强大的爬虫框架,提供了许多方便的特性,如选择器、管道、中间件、代理等。本文将重点介绍如何使用Scrapy的图片管道和代理中间件,以提高爬虫的效率和稳定性。
Amazon图片下载器:利用Scrapy库完成图像下载任务
|
9月前
|
Web App开发 数据安全/隐私保护
【chrome】谷歌chrome浏览器离线安装包的获取及使用技巧
【chrome】谷歌chrome浏览器离线安装包的获取及使用技巧
|
9月前
|
Web App开发 数据采集 JavaScript
Selenium Chrome Webdriver 如何获取 Youtube 悬停文本
Youtube 是一个非常流行的视频分享平台,有时候我们可能想要爬取一些视频的信息,比如标题、播放量、点赞数等。但是有些信息并不是直接显示在网页上的,而是需要我们将鼠标悬停在某个元素上才能看到,比如视频的时长、上传时间等。这些信息被称为悬停文本,它们是通过 JavaScript 动态生成的,所以我们不能用普通的 HTML 解析方法来获取它们。那么,我们该如何用爬虫来获取 Youtube 的悬停文本呢?本文将介绍一种方法,使用 Selenium Chrome Webdriver 来模拟浏览器操作,获取 Youtube 的悬停文本。
118 0
Selenium Chrome Webdriver 如何获取 Youtube 悬停文本
|
定位技术
Google Earth Engine(GEE)——“不听”unlisten()实现面板的“隐身”
Google Earth Engine(GEE)——“不听”unlisten()实现面板的“隐身”
85 0
Google Earth Engine(GEE)——“不听”unlisten()实现面板的“隐身”
|
Web App开发 JavaScript 前端开发
ZeroClipboard,竟然无法在Google Chrome浏览器中使用
ZeroClipboard,竟然无法在Google Chrome浏览器中使用
103 0
ZeroClipboard,竟然无法在Google Chrome浏览器中使用
|
Web App开发 Android开发 开发者
使用Chrome 浏览器调试移动端网页 chrome://inspect/#devices
我使用的手机是三星A9 ,其他安卓手机方式也相同,电脑是win 10 系统。 第一步首先打开手机的开发者模式,确保usb调试和通过usb验证应用程序保持打开状态,如图所示: 第二步,最好是电脑和安卓手机都连接了谷歌浏览器 第三步,打开电脑上的谷歌浏览器,调出控制台, 我们点击More tools,再选择 在之后的页面中,如图所示选项必须打对勾。
6974 0
|
搜索推荐 UED JavaScript
使用WP-NoExternalLinks插件让外链变文本
往往在网站的运营过程中为了达到更好的用户体验,就需要插入一些外部链接,来进行相关文章的推荐阅读,但过多外链会导致自己站点权重转移,对SEO是十分不利的。
1333 0