css3 fieldset,CSS3 fieldset/input 音乐均衡器/音效调节器

最新推荐文章于 2021-08-04 09:05:19 发布
最新推荐文章于 2021-08-04 09:05:19 发布
阅读量196 收藏
点赞数
文章标签： css3 fieldset

CSS

语言：

CSSSCSS

确定

@import url(http://fonts.googleapis.com/css?family=Lobster);

html {

font-size: 1em;

}

body {

color: #bbb;

background-color: #444;

text-align: center;

}

fieldset {

border: #999 solid 0.2em;

border-radius: 0.5em;

display: inline-block;

text-align: left;

position: relative;

transition: border-color 0.25s linear;

}

fieldset:hover {

border: #bbb solid 0.2em;

}

legend {

font-size: 1.8em;

font-family: "Lobster", sans-serif;

padding-left: 0.3em;

padding-right: 0.2em;

color: #ace;

/* Slider *

* ====== */

/* ## Slider main element */

text-shadow: -0.125em 0.05em 0 #214893, -0.25em 0.1em 0 #313131;

}

input[type='range'] {

display: block;

margin: 0;

padding: 0;

font-size: inherit;

width: 9.9em;

height: 1em;

border-radius: 0.25em;

border: 0.2em solid #242424;

background-color: #242424;

background-size: 100% 100%;

background-repeat: no-repeat;

overflow: hidden;

cursor: pointer;

transition: box-shadow 0.2s linear;

box-shadow: 0 0 0 0 transparent;

}

input[type='range']:focus {

box-shadow: 0 0 0 0.1em #aaa;

}

input[type='range']:hover {

/* ## Orientation tweak, with [orient] attribute in degrees */

/* > I know it's not standard, but that's the cleaner way I was thinking of. */

box-shadow: 0 0 0 0.15em #6fc5f0;

}

input[type='range'][orient] {

transform: rotate(attr(orient));

}

input[type='range'][orient='90deg'] {

transform: rotate(90deg);

}

input[type='range'][orient='180deg'] {

transform: rotate(180deg);

}

input[type='range'][orient='270deg'] {

/* ### all vertical ranges : */

transform: rotate(270deg);

}

input[type='range'][orient='90deg'],

input[type='range'][orient='270deg'] {

margin: 4.5em -4.5em;

display: inline-block;

}

input[type='range'][orient='90deg']::-webkit-slider-thumb,

input[type='range'][orient='270deg']::-webkit-slider-thumb {

cursor: ns-resize;

}

input[type='range'][orient='90deg']::-moz-range-thumb,

input[type='range'][orient='270deg']::-moz-range-thumb {

cursor: ns-resize;

}

input[type='range'][orient='90deg']::-ms-thumb,

input[type='range'][orient='270deg']::-ms-thumb {

/* ## Slider components */

/* ### Slider::-track */

cursor: ns-resize;

}

input[type='range']::-webkit-slider-runnable-track {

border: none;

background: none;

height: 100%;

width: 100%;

}

input[type='range']::-moz-range-track {

border: none;

background: none;

height: 100%;

width: 100%;

}

input[type='range']::-ms-track {

border: none;

background: none;

height: 100%;

/* ### Slider::-thumb */

width: 100%;

}

input[type='range']::-webkit-slider-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

cursor: ew-resize;

}

input[type='range']::-moz-range-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

cursor: ew-resize;

}

input[type='range']::-ms-thumb {

margin: 0.05em;

padding: 0;

height: 0.9em;

width: 0.9em;

border-radius: 0.1em;

box-sizing: border-box;

border: none;

background-color: #6fc5f0;

box-shadow: -10em 0 0 0 #313131, -9em 0 0 0 #313131, -8em 0 0 0 #2f343f, -7em 0 0 0 #283f6b, -6em 0 0 0 #214893, -5em 0 0 0 #1a52bc, -4em 0 0 0 #2769d3, -3em 0 0 0 #3e87dc, -2em 0 0 0 #55a5e6, -1em 0 0 0 #6fc5f0, 1em 0 0 0 #181818, 2em 0 0 0 #181818, 3em 0 0 0 #181818, 4em 0 0 0 #181818, 5em 0 0 0 #181818, 6em 0 0 0 #181818, 7em 0 0 0 #181818, 8em 0 0 0 #181818, 9em 0 0 0 #181818;

/* ## Browser tweaks */

/* ### webkit */

cursor: ew-resize;

}

input[type='range'],

input[type='range']::-webkit-slider-runnable-track,

input[type='range']::-webkit-slider-thumb {

/* ### IE */

-webkit-appearance: none;

}

input[type='range']::-ms-track {

color: transparent;

}

input[type='range']::-ms-fill-lower,

input[type='range']::-ms-fill-upper,

input[type='range']::-ms-tooltip {

/* Label *

* ====== */

/* ## Label main element */

display: none;

}

label[type='range'] {

display: block;

position: relative;

margin: 0;

padding: 0;

font-size: inherit;

line-height: 0.6em;

width: 9.9em;

height: 1em;

border-radius: 0.25em;

color: #242424;

font-family: arial;

border: 0.2em solid transparent;

text-align: center;

border-bottom-color: #242424;

background-image: linear-gradient(#242424 calc(50% - .1em), #242424 calc(50% + .1em));

background-position: bottom center;

background-repeat: no-repeat;

background-size: 0.2em 0.2em;

color: #999;

}

label[type='range']:first-letter {

font-size: 0.6em;

}

label[type='range']::before,

label[type='range']::after {

display: block;

position: absolute;

height: 1em;

line-height: 1em;

width: 1em;

}

label[type='range']::before {

content: attr(before);

left: -0.2em;

text-align: left;

}

label[type='range']::after {

content: attr(after);

top: 0;

right: -0.2em;

text-align: right;

}

label[type='range'][orient='90deg'],

label[type='range'][orient='270deg'] {

border-bottom-color: transparent;

display: inline-block;

width: 1em;

height: 10.1em;

line-height: 10.1em;

vertical-align: top;

}

label[type='range'][orient='90deg'] {

border-bottom-color: transparent;

border-left-color: #242424;

background-position: center left;

text-align: center;

}

label[type='range'][orient='90deg']::before {

top: -0.2em;

bottom: auto;

left: 0.1em;

}

label[type='range'][orient='90deg']::after {

left: 0.1em;

top: auto;

bottom: -0.2em;

right: 0;

text-align: left;

}

label[type='range'][orient='180deg'] {

border-bottom-color: transparent;

border-top-color: #242424;

background-position: top center;

line-height: 1.4em;

}

label[type='range'][orient='180deg']::before {

bottom: 0;

left: auto;

right: -0.2em;

text-align: right;

}

label[type='range'][orient='180deg']::after {

bottom: 0;

left: -0.2em;

right: auto;

text-align: left;

}

label[type='range'][orient='270deg'] {

border-bottom-color: transparent;

border-right-color: #242424;

background-position: center right;

text-align: center;

}

label[type='range'][orient='270deg']::before {

bottom: -0.2em;

top: auto;

right: 0.1em;

left: auto;

text-align: right;

}

label[type='range'][orient='270deg']::after {

right: 0.1em;

bottom: auto;

top: -0.2em;

left: auto;

text-align: right;

}

编辑部的宋姑娘
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Flex3自定义组件类似于Fieldset
12-07
Flex3自定义组件类似于Fieldset
HTML5和CSS3价格表翻转切换动画特效.zip
07-11
片段代码： <style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,  footer, header, hgroup, menu, nav, section, main { display: block; } body { line-height: 1; } ol, ul { list-style: none; } blockquote, q { quotes: none; } blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; } table { border-collapse: collapse; border-spacing: 0; } 这是一款漂亮的项目价格表360度翻转代码，HTML5 CSS3价格表翻转切换动画特效，也可以改成选项卡切换、登录注册界面切换效果。
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 例4-6 fieldset
01-20
响应式Web开发项目教程（HTML5+CSS3+Bootstrap）第2版 第4章 HTML5表单的应用 例4-6 fieldset
WEB前端 -- input类型、fieldset、HTML5新标签
叶的博客
11-26 1934
1.fieldset：将表单中的相关元素进行分组，生成一组相关表单的字段 学生信息 姓名： 性别： 男 女 2.input类型 请选择数字： 改变值： 颜色： 日期： 搜索： 3.HTML5部分新标
CSS实现自定义滑动条(input)，动态监听改变数值
眺望远方
06-03 1670
有时候我们需要一个滑杆滑动，可以移动的同时，还能够获取到从小到大的数值，如图： 向后滑动值越大，能够做到实时监听。我的可能不是最优解决方案，仅供大家参考！ 代码如下： 这是建立一个input元素，最小值为0，最大值为100，每次加1，默认值为10. 样式如下： input[type=“range”] { display: block; -webkit-appearance: none; bac...
css音量调节,原生js+css调节音量滑块
weixin_39531229的博客
08-04 640
本文实例为大家分享了js调节音量滑块的具体代码，供大家参考，具体内容如下html部分当前位置0%css部分.all {width: 500px;height: 80px;margin: 100px auto;position: relative;}.bar {width: 500px;height: 20px;border-radius: 10px;background: #aaa;positio...
易语言编写的带音调均衡器的MP3播放器源码
10-01
易语言编写的带音调均衡器的MP3播放器源码(bass播放器)
暖声均衡器
11-12
一块非常好的暖声均衡器，电脑音乐中，吉他上用用感觉会不错哦~
CSS3音乐均衡器跳动动画特效
06-11
CSS3制作的一款彩色音乐均衡器跳动动画特效，各种颜色色块有序的跳动动画效果。
纯CSS3音乐均衡器动画特效
04-25
纯CSS3音乐均衡器动画特效是一款彩色的音乐均衡器动画，黑色为背景，各种色块有序的跳动效果。
带均衡器动画特效的flash音乐播放器.rar
07-10
带均衡器动画特效的flash音乐播放器，均衡器动画效果，随着音乐不停跳跃动画，音乐跳动动画，并配有5首背景音乐，均衡器跳动效果可以关闭/打开，这个效果可用于基于Flash开发的播放器中，不管是音乐播放器或是视频播放器都可以用。
CSS教程:legend标签设定宽度
01-21
<fieldset> 哪些浏览器legend标签设定的宽度有效</legend> <input type=checkbox value=ie6 name=width id=ie6 checked=checked /><label for=ie6>IE6</label> <input type=checkbox value=ie7 name=width ...
JavaScript设置FieldSet展开与收缩
12-09
JavaScript方法代码： 代码如下:// 设置FieldSet高度方法，支持IE浏览器、Firefox // 参数1：pTableID，FieldSet内部div或table的id // 参数2：pFieldSetID，FieldSet的ID // 参数3：pImageID，图片的ID，展开或收缩...
基于matlab实现的一种新型的配电网潮流计算,基于前推回代法
05-03
基于matlab实现的一种新型的配电网潮流计算,基于前推回代法，并附有10kv配电网数据，利用新的判别手段，成功解决配电网不收敛的问题.rar
node-v5.3.0.tar.xz
最新发布
05-03
Node.js，简称Node，是一个开源且跨平台的JavaScript运行时环境，它允许在浏览器外运行JavaScript代码。Node.js于2009年由Ryan Dahl创立，旨在创建高性能的Web服务器和网络应用程序。它基于Google Chrome的V8 JavaScript引擎，可以在Windows、Linux、Unix、Mac OS X等操作系统上运行。 Node.js的特点之一是事件驱动和非阻塞I/O模型，这使得它非常适合处理大量并发连接，从而在构建实时应用程序如在线游戏、聊天应用以及实时通讯服务时表现卓越。此外，Node.js使用了模块化的架构，通过npm（Node package manager，Node包管理器）,社区成员可以共享和复用代码，极大地促进了Node.js生态系统的发展和扩张。 Node.js不仅用于服务器端开发。随着技术的发展，它也被用于构建工具链、开发桌面应用程序、物联网设备等。Node.js能够处理文件系统、操作数据库、处理网络请求等，因此，开发者可以用JavaScript编写全栈应用程序，这一点大大提高了开发效率和便捷性。 在实践中，许多大型企业和组织已经采用Node.js作为其Web应用程序的开发平台，如Netflix、PayPal和Walmart等。它们利用Node.js提高了应用性能，简化了开发流程，并且能更快地响应市场需求。
ASP+ACCESS网上园林设计(源代码+设计说明书).zip
05-03
ASP+ACCESS网上园林设计(源代码+设计说明书).zip
2023-04-06-项目笔记 - 第一百二十二阶段 - 4.4.2.120全局变量的作用域-120 -2024.05.03
05-03
2023-04-06-项目笔记-第一百二十二阶段-课前小分享_小分享1.坚持提交gitee 小分享2.作业中提交代码 小分享3.写代码注意代码风格 4.3.1变量的使用 4.4变量的作用域与生命周期 4.4.1局部变量的作用域 4.4.2全局变量的作用域 4.4.2.1全局变量的作用域_1 4.4.2.120全局变量的作用域_120 - 2024-05-03
css fieldset
06-07
例如，下面的 CSS 代码将 `<fieldset>` 的边框设置为蓝色，内部元素的文本颜色设置为红色，并将 `<legend>` 元素（用于表示 `<fieldset>` 标题的元素）的文本颜色设置为绿色： ```css fieldset { border: 2px ...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值