css - 如何将 styleName (css) 放在 ui.xml 到 HTML5 输入元素(范围)

Question

我确实有非常简单的 ui.xml 和 HTML5 输入元素。当我向这个元素添加 stylename 时，它​​不会影响任何东西吗？我该怎么做，或者我错过了什么？ stylename="{style.input3}"正在处理 TextBox，但不在范围内。

我实际上想做的是，我正在尝试添加工具提示、更改缩略图的颜色等...

<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui='urn:ui:com.google.gwt.uibinder'
    xmlns:g='urn:import:com.google.gwt.user.client.ui'>
<ui:with field="res"
    type="com.ali.slider.client.resources.AllResources" />
<ui:with field="img" type="com.ali.slider.client.resources.AllImages" />

<ui:style>
.panel {
    margin: 5px;
}

.input[type='range'] {
    -webkit-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #999;
    height: 10px;
    vertical-align: middle;
}

.input[type='range']::-moz-range-track {
    -moz-appearance: none;
    border-radius: 5px;
    box-shadow: inset 0 0 5px #333;
    background-color: #999;
    height: 10px;
}

.input[type='range']::-webkit-slider-thumb {
    -webkit-appearance: none;
    border-radius: 20px;
    background-color: #FFF;
    box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);
    border: 1px solid #999;
    height: 50px;
    width: 20px;
}

.input[type='range']::-moz-range-thumb {
    -moz-appearance: none;
    border-radius: 20px;
    background-color: #FFF;
    box-shadow: inset 0 0 10px rgba(000, 000, 000, 0.5);
    border: 1px solid #999;
    height: 50px;
    width: 20px;
}
.input3 {
    -moz-appearance: none;
    border-radius: 20px;
    background: #d0e4f6;
    background-color: #999;
    box-shadow: inset 0 0 10px rgba(002, 002, 000, 2.5);
    border: 1px solid #999;
    height: 20px;
    width: 100px;
}
</ui:style>

<g:HTMLPanel styleName="{res.sliderBarStyle.sliderContainer}">
    <div>
        <input ui:field="hSlider" type="range" min="10" max="100"
            value="20" step="10" name="slider" styleName="{style.input3}"></input>
        <g:TextBox ui:field="sliderTextBox" value="0" styleName="{style.input3}"></g:TextBox>
    </div>
</g:HTMLPanel>
</ui:UiBinder>

Answer 1

HTML(非小部件)元素就像 (X)HTML 中的一样，因此只需使用 class="{style.input3}"