相关疑难解决方法(0)

是否可以设置文件类型的输入元素的样式而不必担心浏览器兼容性？在我的情况下,我需要实现一个背景图像和圆形边框(1px),如果可能的话,也应该定制按钮.

更新: 下面的解决方案.

我有一个滑块(<input type='range'../>),我在拇指内有一个值.这是一个粗略的表示:

        ______
_______/      \______
|______: [42] :______|
       \______/

问题是拇指不支持内容所以我将值放在a中<div><span class='noselect'>[42]</span></div>并left: ?px使用javascript 计算一些以移动div以匹配拇指.

这整个解决方案工作得相当好......除了文本捕获用于拇指的事件,因此滑块不会移动而是正在选择文本.

我添加了css来阻止实际的文本选择:

.noselect {
    -moz-user-select:-moz-none;
    -moz-user-select:none;
    -o-user-select:none;
    -khtml-user-select:none;  
    -webkit-user-select:none; 
    -ms-user-select:none;
    user-select:none; 
    display: block;
}

但上面的CSS并不能防止鼠标事件被文本而不是拇指消耗.

最重要的是,我尝试将事件转移到拇指:

$(document).on('click touchstart touchend touchmove', '.noselect', function (event) {
    var slider = $(this).parents('.slider').first();
    if (slider && slider.length > 0) {
        slider.trigger(event.type, event);
        event.stopPropagation();
        return false;
    } 
});

上面的js捕获文本事件,但试图在它下面的滑块上触发它不会做任何事情.

问题是:如何使该值发生并且不干扰用户交互？

拇指本身的样式就像一个圆圈:

input[type="range"]:disabled::-webkit-slider-thumb {
    -webkit-appearance: none;
    background-color: #404040;
    width: 60px;
    height: 60px;
    border-radius: 30px;
    background-color: …

好吧,我得到了这个代码:

<div class="teste">
    <input type="file" name="teste" />
    teste
</div>

CSS:

.teste {
   width:300px;
   height:100px;
   position:absolute;
   top:10px;
   right:10px;
   overflow:hidden;
   background-color:#FF0000;
   opacity:1; 
   filter:alpha(opacity=100);
}

input[type=file] {
   position:absolute;
   top:0px;
   right:0px;
   font-size:300px;
   opacity:0;
   filter:alpha(opacity=0);
}

在FF和Chrome工作完美,但在文本'teste'变白,我发现当输入文件在文本'teste'时它变白了.

有谁知道如何解决它？谢谢.