将 HTML 输入数字上的向下箭头变得更大、更清晰

2023-11-26

而不是输入“数字”时是否可以始终显示向上/向下箭头?,我希望能够使向上/向下箭头更大更清晰。

What I have right now:

I need to make them bigger like this:


您可以将输入包装在元素中并设置其样式

div {
  display: inline-block;
  position: Relative;
  border: 2px solid grey;
  border-radius: 10px;
  overflow: hidden;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}
div:before,
div:after {
  background: white;
  right: 0px;
  width: 30px;
  height: 20%;
  position: absolute;
  pointer-events: none;
}
div:before {
  content: '';
  bottom: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  background-position: center;
}
div:after {
  content: '';
  top: 50%;
  background: url(http://cdn.flaticon.com/png/256/22205.png) no-repeat white;
  background-size: 20px;
  transform: rotate(180deg);
  background-position: center;
}
input {
  height: 80PX;
  font-size: 50px;
  outline: 0;
  border: 0;
}
<div>
  <input type="number" value="10" />
</div>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

将 HTML 输入数字上的向下箭头变得更大、更清晰 的相关文章

  • Chrome中获取伪元素内容

    我在 webkit 浏览器中通过 Javascript 获取伪元素的生成内容时遇到一些问题 关心者的上下文 我正在开发 jQuery 移动应用程序并尝试使用 FontAwesome 图标 我希望能够使用 jQM 用于其内置图标集的相同数据图
  • 如何使用 Selenium WebDriver 获取 CSS 选择器?

    我正在尝试创建横幅菜单中显示的元素的动态 元素映射 包括为每个菜单显示的链接 该地图将存储在String 矩阵 它将用于不同的方法和测试 为此 我得到了元素的href属性并为菜单中显示的每个链接创建我自己的 CSS 选择器 这是我创建 CS
  • 自定义标签...为什么不呢?

    我找到了一个网站 其中包含向 html 添加自定义标签的指南 就像人们让 ie 使用新的 HTML5 标签一样 我必须承认 我认为添加我自己的标签会很棒 这样可以更轻松地 扫描 代码并找到您要查找的内容 但我发现的每个网站 人们都说它不好
  • 如何保存HTML页面的输入值?

    现在 这个要求可能看起来很奇怪 但我想知道如何实现这一目标 我有一个 HTML 文件 其中有几个输入框 复选框 单选按钮等 我想保留用户 实际上我 在此页面上执行的更改 就像如果用户勾选了一个复选框 那么下次任何人打开该文件时都应该看到该复
  • Html2canvas 忽略图像的对象拟合

    我一直在尝试利用 html2canvas 来截取元素的屏幕截图 我注意到 div 元素内使用 object fit 属性的图像在 html2canvas 屏幕截图后被拉伸 有没有为此散步 这是我的代码
  • HTML5 视频(webm 和 MP4)显示空白屏幕并且无法播放

    我已经用谷歌搜索了一个小时 但我要么很糟糕 要么这不是一个常见问题 这是我的视频标签
  • 当flex-wrap是wrap的时候,flex-shrink还有用吗?

    我不认为flex shrink and flex wrap wrap 在一起有意义 但我想知道我是否遗漏了一些东西 container background DDD width 300px height 100px padding 20px
  • 当 AutoGenerateColumns="true" 时动态设置 gridview 列的宽度

    当我使用属性 AutoGenerateColumns 为 AutoGenerateColumns true 时 我在设置 gridview 的宽度时遇到问题 gridview 是在代码后面进行数据绑定的 如果我使用 gridview1 co
  • 动态加载css的方法

    我很早就知道 您可以使用 addRule 和 insertRule 动态地将样式规则加载到页面中 具体取决于它是 IE 还是兼容标准的浏览器 但我刚刚发现 在 Chrome 上 一种更通用 对我来说 的方法效果很好 创建一个 style 元
  • 通过jquery在日期框中自动添加斜杠/符号[重复]

    这个问题在这里已经有答案了 我发现几个问题但没有答案 所以我问问题 如何添加自动斜杠 符号
  • 我应该如何使用 Bootstrap 设计 Django 验证错误的样式?

    当 Django 中的表单出现验证错误时 错误会在包含类的列表中给出errorlist 可以通过设置使用 Bootstrap 为元素指定错误样式class alert alert error 结合这些并使用 Bootstrap 的错误样式来
  • 使用 jQuery 更改鼠标悬停时的图像源

    我有一些图像及其翻转图像 使用 jQuery 我想在 onmousemove onmouseout 事件发生时显示 隐藏鼠标悬停图像 我所有的图像名称都遵循相同的模式 如下所示 原图 Image gif 翻转图像 Imageover gif
  • C 代码中的握手 WebSocket

    我是 html5 及其 websocket 的新手 现在我一直在尝试用 c 制作自己的 websocket 服务器但是 这对我来说很难 我只想从 C 服务器发送 hello world 到 html 客户端 但是 我在握手方面遇到了麻烦 o
  • HTML 5 视频:使用 javascript 播放多个“剪辑”

    我在 HTML 视频和 JavaScript 方面遇到问题 因此编写了一些简单的代码来演示 有一个视频包含三个 剪辑 全长五秒 显然 在现实世界中 它们要长得多 一个在 25 30 秒 一个在 55 60 秒 最后一个在 85 90 秒 我
  • 类名中的方括号是什么意思?

    I saw here http www position absolute com articles jquery form validator because form validation is a mess 类名中使用的方括号
  • 通过修改 html 设置在 Web 表单上上传的默认文件名/目录

    我一直使用这个上传表单 并且每次都使用相同的文件名 我想知道是否有一种方法可以通过更改代码并在本地保存文件来设置表单中的文件名 如果有其他方法可以实现自动化 我也愿意 谢谢 这是来源
  • HTML 对齐文本

    我想在页面上显示文本 如下所示 My Text Text Here My Text More Text Here Text from line above continued here 我有以下标记只是为了测试
  • CSS:DIV 中的文本被截断

    我正在致力于集成一个 jQuery 插件 该插件会隐藏页面的某些部分 直到用户单击 喜欢按钮 Facebook 小部件的部分文本被切断 我已经尝试过 CSS 但无法让它完全显示 如果容器的宽度设置正确 还有什么可能导致文本被截断 例子 ht
  • CSS3 Marquee / Ticker 动画最后没有空格

    我正在用 2 个项目集合构建字幕 旋转木马效果 循环两者item collection跨越translateX并不难 这里是小提琴 http jsfiddle net k1k3h2p0 但我不喜欢每个循环末尾的空白区域 知道两个集合的宽度可
  • jQuery - 将日期选择器的容器设置为特定的 div

    我在 div 上使用 jQuery UI 日期选择器 div通过移动鼠标隐藏和显示 因为日期选择器存在于末尾标签 不在我的 div 内 当我将鼠标移动到日期选择器时 div 消失 我像这样加载了日期选择器 JavaScript dt1 da

随机推荐