Jquery 모바일 슬라이더 사용자 정의

Question

어떻게하면 입력 상자를 가운데에 표시할까요?

제공된 이미지에서 입력 상자가 슬라이더 &과 겹치고있는 것을 볼 수 있습니다. 또한 입력란의 오른쪽 상단 & 오른쪽 아래 모서리 반경이 없습니다.

이러한 맞춤 설정을 수행 할 수 있습니까?

데모 : http://jsfiddle.net/EWQ6n/572/

제가

$(".ui-slider-input").wrap($('<div />').css({ 
    position : 'relative', 
    display : 'inline-block', 
    height : '36px', 
    width : '45px', 
    overflow : 'hidden' 
    top  : '2%', 
    left  : '30%' 

})); 

Answer 1

답장을 보내 주셔서 감사합니다. 사실 저는 텍스트 상자에서 위 아래 화살표를 제거하고 싶었습니다. 마지막으로 해결책을 찾았습니다.

슬라이더와 함께 제공되는 텍스트 상자를 숨기고 난 후에 &에 슬라이더를 움직이면 값이 변경되는 새 텍스트 상자가 삽입되었습니다.

<input id="txtvalBox" type="text" value="" /> 

$("#points").change(function() { 

    document.getElementById("txtvalBox").value = document.getElementById("points").value; 
}); 

//points is the id of the slider 

이 HTTP 참조 : http://jsfiddle.net/Gk_999/mxzu5Ld3/

Answer 2

상단을 수행하여이했다 (상부 : '2 %') 비율이 너무 픽셀을 사용하여 같은 dosent. 또한 높이와 너비가 국경이없는 이유 인 문제가있었습니다. 내 화면이 넓고 상자가 중앙에 오도록 배치하십시오 (왼쪽 : '46 % ') 백분율을 조정하십시오.

나는 당신을 위해 데모를했습니다. 당신에게 다른 브라우저에서 더 나은 결과를 얻을 것이다 입력 요소와 슬라이더를 Wraping

http://jsfiddle.net/k7XAj/4/

코드

$(".ui-slider-input").wrap($('<div />').css({ 
    position : 'relative', 
    display : 'inline-block', 
    height : '40px', 
    width : '70px', 
    overflow : 'hidden', 
    top  : '-30px', 
    left  : '46%' 
})); 

Answer 3

는 크기

데모 : http://jsfiddle.net/EWQ6n/574/

$(".ui-slider-input").each(function(){ 

    $(this).css({ 
     position : 'absolute', 
     top  : '2%', 
     left  : '30%', 
     marginLeft: '-10px' 
    }) 

    .add($(this).next()).wrapAll($('<div />').css({ 
     position : 'relative', 
     paddingTop: '40px' 
    })) 
});