如何将ui.xml上的样式名（css）放到HTML5输入元素（范围）中

我有非常简单的ui.xml和HTML5输入元素。当我将stylename添加到此元素时，它不会影响任何内容？我怎么能这么做，还是我错过了什么？stylename={style.input3}在文本框上工作，但在范围上不工作

实际上，我想做的是，我正在尝试添加工具提示，更改拇指的颜色，等等

<!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>

---

HTML非小部件元素与XHTML中的元素类似，所以只需使用class={style.input3}

可能是我做错了什么。它目前正在工作，没有任何错误。谢谢Thomas。现在我将寻找如何在firefox上正确添加工具提示