HTML美化单选、滚动条

<input type="radio" id="radio1" name="radio-1-set" class="regular-radio" checked /><label for="radio1"></label>

/* RADIO */

.regular-radio {display: none;}

.regular-radio + label {-webkit-appearance: none; border: 1px solid #cacece;box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); padding: 5px; border-radius: 50px; display: inline-block; position: relative;}

.regular-radio:checked + label:after { content: ‘ ‘; width: 8px; height:8px; border-radius: 50px; position: absolute; top: 1px; background: #fff; box-shadow: inset 0px 0px 10px rgba(0,0,0,0.3); text-shadow: 0px; left: 1px; font-size: 32px;}

.regular-radio:checked + label { color: #99a1a7; border: 1px solid #adb8c0; box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1), inset 0px 0px 10px rgba(0,0,0,0.1);}

.regular-radio + label:active, .regular-radio:checked + label:active { box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1);}

.big-radio + label { padding: 16px;}

.big-radio:checked + label:after { width: 24px; height: 24px; left: 4px; top: 4px;}

/* 美化滚动条 */

::-webkit-scrollbar { width: 0px;height: 14px; }

::-webkit-scrollbar-track,::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent;}

::-webkit-scrollbar-track { box-shadow: 1px 1px 5px rgba(0,0,0,.2) inset;  }

::-webkit-scrollbar-thumb {min-height: 20px;  background-clip: content-box;  box-shadow: 0 0 0 5px rgba(0,0,0,.2) inset;  }

::-webkit-scrollbar-corner {background: transparent;}

时间： 2024-08-02 10:22:13

HTML美化单选、滚动条的相关文章

NB的CSS样式集锦1——CSS3滚动条美化,CSS3滚动条皮肤

转自:http://www.pengyaou.com/codecss3/POKDNMS_112.html CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条. 下面是5个滚动条样式. css代码 1 .test1::-webkit-scrollbar { 2 width: 8px; 3 } 4 .test1::-webk

CSS美化页面滚动条

文章来自:http://www.webhek.com/scrollbar 本文将会告诉你如何用CSS修改/美化浏览器页面上出现的滚动条.改变它们的颜色,调整它们的外形,适配你对页面UI设计.我们首先将会看看谷歌(Webkit)浏览器提供了哪些CSS属性,最后,还将介绍如何用jQuery支持其它类型的浏览器. 各种浏览器对CSS滚动条的支持情况 这里说的Webkit浏览器包括谷歌浏览器,苹果公司的Safari浏览器,以及最新的Opera浏览器.这些浏览器加起来占有超过半数的桌面浏览器市场份额.对于

CSS3滚动条美化,CSS3滚动条皮肤

CSS3 -webkit-scrollbar滚动条皮肤美化实现,利用-webkit-scrollbar,-webkit-scrollbar-track,-webkit-scrollbar-thumb这2个属性设置不同样式的滚动条. 下面是5个滚动条样式. css代码 1 .test1::-webkit-scrollbar { //滚动条的宽度 2 width: 8px; 3 } 4 .test1::-webkit-scrollbar-track { //滚动条的样式 5 background-c

QTableWidget 使用及美化_QtableWidget_QtableView滚动条宽度及样式

//创建及属性设置m_tableWidget = new QTableWidget(this);m_tableWidget->setRowCount(10);m_tableWidget->setColumnCount(3);//m_tableWidget->setFrameShape(QFrame::NoFrame); //设置边框//m_tableWidget->setShowGrid(false); //设置不显示格子线//QPalette pll = m_tableWidge

css - 表单元素默认样式美化 - 单选框

单选框 HTML代码 样式 .radio input{ visibility: hidden;}.radio label{ position: relative;}.radio label:after{ content: "";/*必须设置*/ display: inline-block; width: 20px; height: 20px; border: 1px solid #5dbd5d; position: absolute; top: 0px; left: -32px; bo

美化单选框

<!doctype html><html><head>    <meta charset="utf-8">    <title>radio</title></head><body> <style> /* RADIO */.regular-radio {    display: none;}/*未选中时圆圈的样子图片或颜色*/.regular-radio + label {    

css3的实现的checkbox复选框和radio单选框绚丽美化效果

css3的实现的checkbox复选框和radio单选框绚丽美化效果:在css3之前要美化单选框和复选框无非是使用图片进行相关的替换操作,并且还有很大的局限性.由于css3的出现,一切好像变的都变的轻松起来,并且效果非常的绚丽,这是使用css2无法做到的,下面就分享一段能够实现此功能的代码实例,需要的朋友可以做一下参考.代码如下: <!DOCTYPE html><html> <head> <meta charset=" utf-8"> &

美化滚动条样式

大家好,最近项目里用到美化浏览器滚动条样式,我也总结一下,分析给大家,挺好用的哦 ::-webkit-scrollbar { width: 14px; height: 14px; } ::-webkit-scrollbar-track, ::-webkit-scrollbar-thumb { border-radius: 999px; border: 5px solid transparent; } ::-webkit-scrollbar-track { box-shadow: 1px 1px

CSS3美化表单控件

CSS3美化表单控件 2016-06-28 18:14 by 图书馆的牧羊人, 582 阅读, 9 评论, 收藏,  编辑 表单的默认控件在不同的浏览器中的样式不同,用户体验很差.用CSS3可以实现表单控件的美化,可以提供更好的用户体验.不足之处就是浏览器的兼容性问题. 一.下拉控件 效果图: 下拉控件的布局结构: <div class="container"> <div class="select"> <p>所有选项</p