可以在CSS中应用<input type="number">的内部"向上箭头"和"向下箭头"中的样式吗?我想把上箭头的背景改成蓝色,把下箭头改成红色.有什么主意吗?

设置内部箭头的样式

推荐答案

UPDATE 17/03/2017

原来的解决方案不再有效了.微调器是shadow dom的一部分.现在只想隐藏在chrome使用中:

input[type=number]::-webkit-inner-spin-button {
  -webkit-appearance: none;
}
<input type="number" />

或者总是显示:

input[type=number]::-webkit-inner-spin-button {
  opacity: 1;
}
<input type="number" />

You can try the following but keep in mind that works only for Chrome:

input[type=number]::-webkit-inner-spin-button { 
    -webkit-appearance: none;
    cursor:pointer;
    display:block;
    width:8px;
    color: #333;
    text-align:center;
    position:relative;
}

input[type=number]::-webkit-inner-spin-button:before,
input[type=number]::-webkit-inner-spin-button:after {
    content: "^";
    position:absolute;
    right: 0;
}

input[type=number]::-webkit-inner-spin-button:before {
    top:0px;
}

input[type=number]::-webkit-inner-spin-button:after {
    bottom:0px;
    -webkit-transform: rotate(180deg);
}
<input type="number" />

Html相关问答推荐

CSS动画积分计数器

有没有一种方法可以用css和html在桌面上并排显示列,在移动设备上显示一个下方的列?

当表头包含特殊字符时,R Quarto发布的HTML表中不必要的大列宽

如何保持嵌套进度条的背景色?

如何制作';在第';页中搜索;是否发现多个元素中的单词?

div 中的垂直中心表格

目标第一个祖先标签的 XPath

如何使 CSS 网格项目像 Flexbox 项目一样匹配父级的高度

如何在r中提取明显非标准html标签的值

配置了 HTML 视口的 Google Apps 脚本移动网络应用程序无法正确显示

按钮悬停效果不影响按钮内的图标

标题在实时网站上闪烁

如何为卡片块制作侧丝带样式

停止 Bootstrap 5 输入调整 CSS 网格单元的高度

为什么可滚动弹性项目需要 flex-basis: 0 ?

为什么我的图像在悬停时与固定顶部栏重叠?

文本不显示在 div 下方

在HTML使用link标签导入外部CSS时出现元素link不允许使用尾斜杠错误

如何使用html css将图像显示为附加形状

如何将第一个 p 标签放在其下方第二个 p 标签的中间