css--input的type为range的样式修改

css 修改 input range 样式 根据mdn文档介绍,这个样式兼容性不太好,应该多看看目标用户的浏览器支不支持。 阅读详情

效果:

 

代码:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
  <!-- appearance 允许您使元素看上去像标准的用户界面元素 -->
  <!-- -webkit-slider-thumb 这是type为range的input标签内的一种伪类样式,用于设置range的滑块的具体样式,该伪类只在内核为webkit/blink的浏览器中有效 -->
  <!--  -webkit-slider-thumb需要配和::-webkit-slider-runnable-track使用,否则会没有效果 -->
<style>
  .slider1 {
    -webkit-appearance: none;
    max-width: 350px;
    width: 100%;
    height: 10px;
    outline: none;
  }
  .slider1::-webkit-slider-thumb{
      -webkit-appearance: none;/*清除默认样式*/
      height:25px;/*设置滑块高度*/
      width:25px;/*设置滑块宽度*/
      background: #fff;/*设置背景色*/
      border-radius:50%;/*加个圆角边*/
      /* margin-top:-1vw; 使用position的话会导致滑块不滑动,但是绑定的value是改变的,所以这里使用margin-top去做定位*/
      box-shadow: 0 1px 1px rgba(0,0,0,.5);
      cursor: pointer;
  }
  .slider1::-webkit-slider-runnable-track{
      border-radius: 30px;
      background:#128;
      height:25px;
  }

  .slider2 {
    -webkit-appearance: none;
    max-width: 350px;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    background: #1B2B33;
    outline: none;
    margin-top: 50px;
    margin-bottom: 30px
  }

  .slider2::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 1px rgba(0,0,0,.5);
    border:1px solid #eee;
    cursor: pointer;
  }

  .slider2::-moz-range-thumb {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,.1);
    cursor: pointer;
  }
</style>

  </head>
  <body>
    <input type="range" min="1" max="100" value="1" class="slider1">
      <input type="range" min="1" max="100" value="1" class="slider2">
  </body>
</html>

 

大事件项目38----修改富文本组件内的样式 1、修改组件内的样式,我们发现这个富文本编辑器不够高,如果我想要改变样式怎么做? 2、修改高度 3、他直接选的 4、NetWork代表网络请求 5、我给个高度px,1000px,这样写好像也没有问题 6、我们可以选中这个P,或者是给div一个高度 7、他的高度来自这个父级,container 8、Css必须是具体px才行 9、你选择rem,或者是其他的。。。。我们逐级往上找,能不能来一个给他定义ui 10、笔记里用的是ql-editer 11、这里 阅读详情

相关推荐

购物车数量加减模块布局

先来看一下需要实现的布局效果: 主要思路:左右两边的加减号采用a标签来进行布局,中间的是input来布局,然后三个部分都浮动起来排成一排,这样a标签就会自动有行内块元素的性质就不需要进行模式转换了。这里还需要注意要把全局的padding和margin去掉因为input自带所以需要全局进行去掉。最终完整代码如下:...

qq_43781887的博客 364

input[range]的简单使用及样式修改

使用 最近项目上有个需求要做一个可以拖动的条,并且可以根据拖动的不同位置进行相应的操作,所以就找了找有没有什么html5可以直接用的东西,因此就找到了input[type=“range”]这个东西。东西是找到了,但是有一个问题,样式巨丑。。。 所以在此简单介绍下如何修改样式及一个做成的小demo 样式的修改 和其他不能设置直接设置的input组件一样,range的使用也是先把它默认的样式给他干掉,即在对应的css中先加上一句 -webkit-appearance: none 或者 appearance: n

m0_47587616的博客 5479

uniapp自定义tab切换css样式、uni-forms中input下拉等标签字体、过宽、溢出样式一系列调整(附加实战举例)

uniapp自定义tab切换css样式、uni-forms中input下拉等标签字体、过宽、溢出样式一系列调整(附加实战举例)

可可的博客 802

自定义(滑动条)input[type="range"]样式

这是我的第一篇博文,也是我这个小白努力的起点。刚接触JavaScript没多久,如果文中有错误的地方欢迎大家指正,或者给予建议,让我能逐渐向大牛靠拢。今天这篇文章给大家带来的是关于美化Slider Bar的相关内容。Range是HTML5中新出现的滑块控件,也是常见的控件的之一,不过这个控件的原始样式略丑,所以想对它进行一些改造。需要注意的是Internet Explorer 9及更早IE版本并不支

清风的博客 13万+

【实验】Linux下完全卸载oracle单实例(亲身体验完整版)

停止oracle数据库服务 停止监听 卸载数据库实例 因为自己懒得再弄dbca图形化界面啥的,直接采用dbca静默删除数据库实例,命令如下 dbca -silent -deleteDatabase -sourcedb orclhq -sid orcl -sysDBAUserName orcl -sysDBAPassword zte [oracle@slave ~]$ dbca -silent ...

萝卜吃鱼914的博客 1943

利用Langchain生成合成数据的实践指南

合成数据是相对于从真实世界事件中收集的数据而言的人工生成的数据。它用于模拟真实数据,同时避免隐私泄露或遇到真实数据中的局限性。:尽管合成数据有诸多优点,但应谨慎使用,因为它可能无法捕捉真实世界的复杂性。

eahba的博客 396

html里range怎么改样式,CSS之修改input range样式

8种机械键盘轴体对比本人程序员,要买一个写代码的键盘,请问红轴和茶轴怎么选?今天来探讨一下 HTML5 的 range 这个新的 input 类型,不过重点不是在 range 要如何使用,而是在如何去改变 range 的样式,做出一个漂漂亮亮的滑动杆。过去我们要制作美美的滑动杆 ( range slider ),不外乎就是用个 span 或 div ,搭配判断鼠标座标 ( pageX、pageY...

weixin_34553907的博客 4024

Matlab:常见涡旋光束仿真

代码: clc clear all close all %% 环形涡旋光束 N = 200; lambda = 632e-9; %波长为632nm k = 2*pi/lambda; %波数 w0 = 3; %束腰半径 x = linspace(-10,10,N); y = linspace(-10,10,N); [X,Y] = meshgrid(x,y); [t...

zzz997的博客 3万+

HTML input[range]组件自定义样式(css,js/jq)

HTML input[range]组件自定义样式(css,js/jq) ​ 首先 演示: 其次 代码部分 css ​

caocaohgvjyuyu的博客 1088

InterSystems IRIS 数据库数据平台安装

下载地址:安装包:IRIS_Community-2024.1.0.267.2-win_x64.exe。

yuguang的博客 2367

C语言—for循环打印矩形,正三角形,倒三角形,九九乘法,等腰三角形,倒着的等腰三角形(简易版代码)(重点考察for循环嵌套)

本章节教大家如何利用for循环打印正三角形,倒三角形,九九乘法表及等腰三角形(简易版代码)说明:1、循环语句的循环体内又包含另一个完整的循环结构,称为循环结构的嵌套。内嵌的循环语句中还可以再嵌套循环结构,这样就形成多重循环结构的嵌套。2、for 语句、while 语句和 do-while 语句都允许嵌套。三种循环语句可以相互嵌套。3、内层的循环语句必须完全被包含在外层的循环体中,不能发生交叉。

m0_63501145的博客 1694

input标签submit属性,用CSS控制样式时高度不好控制的解决办法

 input标签submit属性,用CSS控制样式时高度不好控制的解决办法。 需要在样式表中加入box-sizing: content-box;-moz-box-sizing: content-box;-webkit-box-sizing: content-box;

XYCMS博客家园 5795

一文吃透 OData Deep Insert:从框架原理到 ABAP 实战

本文面向ABAP工程师,解析OData服务中的Deep Insert技术。文章首先阐述Deep Insert的业务背景,说明其适用于父子层级数据必须成组创建的场景(如销售订单与行项目)。随后深入框架实现机制,介绍SAP Gateway如何通过CREATE_DEEP_ENTITY方法处理嵌套请求,并强调开发者的责任边界。通过销售订单案例,文章对比了Deep Insert与$batch的适用场景差异,提供请求负载示例和DPC_EXT实现骨架代码。最后给出MPC_EXT声明深结构的三种套路,以及事务处理和错误处理

2007 年 ~ 2025 年,深耕 SAP 技术 18 年 224

input书写css的注意事项 标签高度不一样 浏览器不兼容

最近发现input标签是总不能获得跨浏览器的统一样式。主要的问题有这么两个:一是input标签的高度不能统一,各浏览器不兼容,Firefox和IE中的高度始终不能一致;二是在IE浏览器中属性为text的input标签中的输入文字不像标准浏览器中的那样垂直居中显示,而是靠输入框的左上角显示。 为了彻底解决搜索框的这些问题,我以GreenGaint主题搜索框的样式为准,重写了一遍代码并且以像素为

cherry_vicent的专栏 5965

C# 接口和抽象类

文章目录1. 什么是接口和抽象类2. 接口与单元测试3. 依赖&耦合4. 依赖翻转5. 单元测试 1. 什么是接口和抽象类 接口和抽象类都是“软件工程产物” 具体类->抽象类->接口:越来越抽象,内部实现的东西越来越少 抽象类是未完全实现逻辑的类(可以有字段和非public成员,它们代表了“具体逻辑”) 抽象类为复用而生:专门作为基类来使用,也具有解耦功能 封装确定的,开放不确定的,推迟到合适的子类中去实现 接口是完全未实现逻辑的“类”(“纯虚类”;只有函数成员;成员全部publi

汽车电子软件领域知识分享 1012

Windows 11 安装、使用 Git:下载、安装、概念、命令、分支模型

本文详细介绍了在 Windows 11 系统上安装与使用 Git 的完整流程,涵盖从官方或国内镜像下载安装包、关键安装选项配置,到 Git 核心概念(如工作区、暂存区、分支、远程仓库等)的通俗解释。同时梳理了常用命令与五种主流 Git 分支模型(如 Git Flow、GitHub Flow 等),帮助开发者根据项目规模选择合适的工作流,是面向初学者与进阶用户的实用指南。

寒水馨 · 轻量级技术文档 · hanshuixin.org 2378

CSS小tips

1. 标签的默认样式 当在页面中添加一个input标签,当点击输入框时会有一个外边框包裹着,可以使用 :input { outline: none} 去除点击时产生的外边框包裹默认样式 input{border: none} 去除input标签的默认样式

hexon804的专栏 434

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

input的type属性为file时,如何修改按钮样式

给input标签设置 style=“opacity: 0;” 然后在外面嵌套一层div设置自己的样式,给到相对定位改变文字位置 <div class="" style="display: flex;flex-direction: row;margin:15px 6%;"> <p style="color: #fff;position: absolute;left:142px;top:59px;">选择文件</p> <div class="" style="b

南野子 1558

假人有限元模型

假人模型,车辆碰撞假人有限元模型,适合做乘员安全的研究者利用

汉书HE8,好用的汇编代码编写工具

汉书HE8,好用的汇编代码编写工具早期编写汇编代码所用功能强大

一组button的css库

我最近发现了一个有意思的CSS样式库,和Bootstrap相似,但是它是专门的一个高度可定制的,免费的并且开源的按钮CSS样式库,这里附上它的网址:http://www.bootcss.com/p/buttons/接下来介绍怎么使用这个CSS样式库,如上图,进入网址后,点击下载,会出现一个全是代码的网页,然后鼠标右键点击全选,复制,这里的代码就是这个BUTTONS的CSS样式代码,再接下来就是在你...

qq_33249977的博客 1325

深度学习工具包 DeepLearningToolbox

深度学习工具包Deprecation notice.-----This toolbox is outdated and no longer maintained.There are much better tools available for deep learning than this toolbox, e.g. [Theano](http://deeplearning.net/software/theano/), [torch](http://torch.ch/) or [tensorflow](http://www.tensorflow.org/)I would suggest you use one of the tools mentioned above rather than use this toolbox.Best, Rasmus.DeepLearnToolbox================A Matlab toolbox for Deep Learning.Deep Learning is a new subfield of machine learning that focuses on learning deep hierarchical models of data.It is inspired by the human brain's apparent deep (layered, hierarchical) architecture.A good overview of the theory of Deep Learning theory is[Learning Deep Architectures for AI](http://www.iro.umontreal.ca/~bengioy/papers/ftml_book.pdf)For a more informal introduction, see the following videos by Geoffrey Hinton and Andrew Ng.* [The Next Generation of Neural Networks](http://www.youtube.com/watch?v=AyzOUbkUf3M) (Hinton, 2007)* [Recent Developments in Deep Learning](http://www.youtube.com/watch?v=VdIURAu1-aU) (Hinton, 2010)* [Unsupervised Feature Learning and Deep Learning](http://www.youtube.com/watch?v=ZmNOAtZIgIk) (Ng, 2011)If you use this toolbox in your research please cite [Prediction as a candidate for learning deep hierarchical models of data](http://www2.imm.dtu.dk/pubdb/views/publication_details.php?id=6284)```@MASTERSTHESIS\{IMM2012-06284, author = "R. B. Palm", title = "Prediction as a candidate for learning deep hierarchical models of data", year = "2012",}```Contact: rasmusbergpalm at gmail dot comDirectories included in the toolbox-----------------------------------`NN/` - A library for Feedforward Backpropagation Neural Networks`CNN/` - A library for Convolutional Neural Networks`DBN/` - A library for Deep Belief Networks`SAE/` - A library for Stacked Auto-Encoders`CAE/` - A library for Convolutional Auto-Encoders`util/` - Utility functions used by the libraries`data/` - Data used by the examples`tests/` - unit tests to verify toolbox is workingFor references on each library check REFS.mdSetup-----1. Download.2. addpath(genpath('DeepLearnToolbox'));Example: Deep Belief Network---------------------```matlabfunction test_example_DBNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit RBM and visualize its weightsrand('state',0)dbn.sizes = [100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);figure; visualize(dbn.rbm{1}.W'); % Visualize the RBM weights%% ex2 train a 100-100 hidden unit DBN and use its weights to initialize a NNrand('state',0)%train dbndbn.sizes = [100 100];opts.numepochs = 1;opts.batchsize = 100;opts.momentum = 0;opts.alpha = 1;dbn = dbnsetup(dbn, train_x, opts);dbn = dbntrain(dbn, train_x, opts);%unfold dbn to nnnn = dbnunfoldtonn(dbn, 10);nn.activation_function = 'sigm';%train nnopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.10, 'Too big error');```Example: Stacked Auto-Encoders---------------------```matlabfunction test_example_SAEload mnist_uint8;train_x = double(train_x)/255;test_x = double(test_x)/255;train_y = double(train_y);test_y = double(test_y);%% ex1 train a 100 hidden unit SDAE and use it to initialize a FFNN% Setup and train a stacked denoising autoencoder (SDAE)rand('state',0)sae = saesetup([784 100]);sae.ae{1}.activation_function = 'sigm';sae.ae{1}.learningRate = 1;sae.ae{1}.inputZeroMaskedFraction = 0.5;opts.numepochs = 1;opts.batchsize = 100;sae = saetrain(sae, train_x, opts);visualize(sae.ae{1}.W{1}(:,2:end)')% Use the SDAE to initialize a FFNNnn = nnsetup([784 100 10]);nn.activation_function = 'sigm';nn.learningRate = 1;nn.W{1} = sae.ae{1}.W{1};% Train the FFNNopts.numepochs = 1;opts.batchsize = 100;nn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.16, 'Too big error');```Example: Convolutional Neural Nets---------------------```matlabfunction test_example_CNNload mnist_uint8;train_x = double(reshape(train_x',28,28,60000))/255;test_x = double(reshape(test_x',28,28,10000))/255;train_y = double(train_y');test_y = double(test_y');%% ex1 Train a 6c-2s-12c-2s Convolutional neural network %will run 1 epoch in about 200 second and get around 11% error. %With 100 epochs you'll get around 1.2% errorrand('state',0)cnn.layers = { struct('type', 'i') %input layer struct('type', 'c', 'outputmaps', 6, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %sub sampling layer struct('type', 'c', 'outputmaps', 12, 'kernelsize', 5) %convolution layer struct('type', 's', 'scale', 2) %subsampling layer};cnn = cnnsetup(cnn, train_x, train_y);opts.alpha = 1;opts.batchsize = 50;opts.numepochs = 1;cnn = cnntrain(cnn, train_x, train_y, opts);[er, bad] = cnntest(cnn, test_x, test_y);%plot mean squared errorfigure; plot(cnn.rL);assert(er<0.12, 'Too big error');```Example: Neural Networks---------------------```matlabfunction test_example_NNload mnist_uint8;train_x = double(train_x) / 255;test_x = double(test_x) / 255;train_y = double(train_y);test_y = double(test_y);% normalize[train_x, mu, sigma] = zscore(train_x);test_x = normalize(test_x, mu, sigma);%% ex1 vanilla neural netrand('state',0)nn = nnsetup([784 100 10]);opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samples[nn, L] = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.08, 'Too big error');%% ex2 neural net with L2 weight decayrand('state',0)nn = nnsetup([784 100 10]);nn.weightPenaltyL2 = 1e-4; % L2 weight decayopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex3 neural net with dropoutrand('state',0)nn = nnsetup([784 100 10]);nn.dropoutFraction = 0.5; % Dropout fraction opts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex4 neural net with sigmoid activation functionrand('state',0)nn = nnsetup([784 100 10]);nn.activation_function = 'sigm'; % Sigmoid activation functionnn.learningRate = 1; % Sigm require a lower learning rateopts.numepochs = 1; % Number of full sweeps through dataopts.batchsize = 100; % Take a mean gradient step over this many samplesnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex5 plotting functionalityrand('state',0)nn = nnsetup([784 20 10]);opts.numepochs = 5; % Number of full sweeps through datann.output = 'softmax'; % use softmax outputopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, train_x, train_y, opts);[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');%% ex6 neural net with sigmoid activation and plotting of validation and training error% split training data into training and validation datavx = train_x(1:10000,:);tx = train_x(10001:end,:);vy = train_y(1:10000,:);ty = train_y(10001:end,:);rand('state',0)nn = nnsetup([784 20 10]); nn.output = 'softmax'; % use softmax outputopts.numepochs = 5; % Number of full sweeps through dataopts.batchsize = 1000; % Take a mean gradient step over this many samplesopts.plot = 1; % enable plottingnn = nntrain(nn, tx, ty, opts, vx, vy); % nntrain takes validation set as last two arguments (optionally)[er, bad] = nntest(nn, test_x, test_y);assert(er < 0.1, 'Too big error');```[![Bitdeli Badge](https://d2weczhvl823v0.cloudfront.net/rasmusbergpalm/deeplearntoolbox/trend.png)](https://bitdeli.com/free "Bitdeli Badge")

简单的常用标签以及属性(随时补充)

HTML类别 table 表格 属性:1.cellpadding 单元格内部与边框的距离         2.cellspacing 每个单元格之间的间距     td 表中的单元格 属性colspan="值" 将单元格横向合并指定值 input 输入框 属性:1.type="text" 常用输入框 ,可获取数字,符号,文字,字母等 ...

Ldown2014的博客 168

HTML搜索框的制作过程

1.搜索框的构成 input标签和button标签 我的理解应该就类似于行内块元素,可以设置宽高,但同时又不独占一行 placeholder(占位文本)就是输入框一开始默认显示的文本 <div class="search"> <input type="search" name="" id="" placeholder="搜索框制作"> <button type="button">搜索</button> &lt

qq_56599702的博客 2万+

elementui如何在input 框中搜索_怎么做html网页中的这种搜索框?

html中有相关的输入框标签控件,可以使用html+css做出自己想要的效果,也可以使用一些样式框架中的组件,比如elementUI,layUI,bootstrap等等。下面使用html+css写一个搜做框效果,经供参考。1、html代码<input class="user-input" type="text" name="search" placeholder="请输入内容"> &l...

weixin_39621427的博客 457

收集的一些前端Bug概要。先记上一笔!(二)

26.超链接访问过后hover样式就不出现的问题 被点击访问过的超链接样式不在具有hover和active了,很多人应该都遇到过这个问题,解决方法是改变CSS属性的排列顺序: L-V-H-A a:link {color: #1f3a87; text-decoration:none;} a:visited {color: #83006f;text-decoration:none;} a:

xiaojia_37的专栏 802

圆角矩形显示不同的input标签

实现所示的效果图 方法一:

xiaoxiao_xiaoliu的专栏 2010

小程序 input placeholder高度与input默认高度冲突问题

今天把input里的placeholder设置为22rpx,发现鼠标点击时,闪烁的图标高度总是大于placeholder高度,尝试了其他办法,搞不定,最后使用了textarea标签代替input标签。

spfLinux的博客 3331
上一篇: js-背景---点线随着鼠标动
下一篇: js--动态修改div的border-shadow
珊珊333333
博客等级 码龄16年 83粉丝 1375原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明:

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

余额充值