输入范围处理程序不会在 Chrome 中呈现

发布于 2024-11-07 02:31:49 字数 1098 浏览 1 评论 0原文

我正在开发一个在网站上预览字体的工具。对于此工具，我想使用更改文本区域中的字体大小。由于我不喜欢滑块和处理程序的默认 WebKit 渲染，因此我使用 CSS 自定义了它们。虽然页面在 Safari 中呈现良好，但 Chrome 不会显示滑块手柄（但其他网站上的滑块呈现良好）。我需要更改什么才能使其在 Chrome 中也正常工作？

HTML

<input type="range" min="6" max="70" value="22" id="font-1-size" />

CSS

.tester-option.font-size input
{
    -webkit-appearance: none !important;
    background: #cecece;
    height: 1px;
    width: 425px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
}

.tester-option.font-size input::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #666;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

您可以在这里找到实时示例： http://fishnation.de/development /26plus/#test-font 渲染差异 safari 和 chrome

PS 我知道有 jQuery UI，但我想替换尽可能少的元素。

原文

I am working on a tool to preview fonts on a website. For this tool, I want to use <input type="range" /> to change the font size in a textarea. Since I don't like the default WebKit rendering of the slider and the handler, I customized them using CSS. While the page renders fine in Safari, Chrome does not display the slider handle (Sliders on other websites render fine, though). What do I have to change to make it work in Chrome as well?

The HTML

<input type="range" min="6" max="70" value="22" id="font-1-size" />

The CSS

.tester-option.font-size input
{
    -webkit-appearance: none !important;
    background: #cecece;
    height: 1px;
    width: 425px;
    -webkit-transform: translate3d(0px, 0px, 0px);
    margin-top: 10px;
    cursor: pointer;
}

.tester-option.font-size input::-webkit-slider-thumb
{
    -webkit-appearance: none !important;
    background: #666;
    height: 10px;
    width: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
    border-radius: 10px;
}

You can find the live example here: http://fishnation.de/development/26plus/#test-font render differences safari and chrome

P.S. I am aware that there is jQuery UI, but I want to replace as few elements as possible.

分享到QQ

分享到微博