如何更改jquery ui输入文本框背景图片

Question

我有一个文本字段的自定义图像。我正在使用jquery移动输入文本框。我想将自定义图像作为背景应用于输入文本框。请指导我如何做到这一点。

Answer 1

只需将图像应用于CSS中的背景：

<form>
    <label for="text-1">Text input:</label>
    <input type="text" name="text-1" id="text-1" value="hello world!" />
</form>

#text-1 {
    background-image: url("http://lorempixel.com/1000/40/abstract/1/") !important;
    color: white;
    text-shadow: 0 1p 0 #333;
}

  

<强> DEMO

更新： OP也想要滑块手柄的背景：

在滑块周围添加一个容器，以简化CSS选择器：

<div id="sliderContainer">
    <label for="slider-1">Slider:</label>
    <input type="range" name="slider-1" id="slider-1" min="0" max="100" value="50" />            
</div>

将背景应用于容器内的.ui-slider-handle类的div：

#sliderContainer .ui-slider-handle {
       background-image: url("http://lorempixel.com/80/80/abstract/3/") !important; 
}

  

更新了 DEMO