사용자 정의 라디오 버튼 표시 값 내부

라디오 버튼을 사용자 정의했는데 한 가지 예외를 제외하고는 의도 한대로 작동합니다. 값을 라디오 버튼 div 안에 넣고 싶습니다. 그리고 지금 내가 만든 라디오 버튼 밖에서 보여줍니다. 실제로는 클래스 빅 라디오입니다.사용자 정의 라디오 버튼 표시 값 내부

<style> 
    .ipad { 
     -webkit-appearance: none; 
     background-color: #fafafa; 
     border: 1px solid #cacece; 
     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05); 
     padding: 9px; 
     border-radius: 3px; 
     display: inline-block; 
     position: relative; 
    } 

    .ipad:active, .ipad:checked:active { 
     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px 1px 3px rgba(0,0,0,0.1); 
    } 

    .ipad:checked { 
     background-color: blue; 
     border: 1px solid #adb8c0; 
     box-shadow: 0 1px 2px rgba(0,0,0,0.05), inset 0px -15px 10px -12px rgba(0,0,0,0.05), inset 15px 10px -12px rgba(255,255,255,0.1); 
     color: #99a1a7; 
    } 
    .ipad:checked:after { 
     content: '\2714'; 
     font-size: 14px; 
     position: absolute; 
     top: 0px; 
     left: 3px; 
     color: transparent; 
    } 
    .big-radio { 
     padding: 18px; 
    } 

    .big-radio:checked:after { 
     font-size: 28px; 
     left: 6px; 
    } 



</style>

HTML :

<div class="button-holder"> 
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081764"/> Value1 
</div> 
<div class="button-holder"> 
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081765"/> Value 2 
</div>

찾아 주시기 바랍니다 내가 아래

을 만든 라디오 버튼 내부의 값 1, 값 2를 보여줄 수있는 방법 내 코드

CSS입니다 여기서 jsfiddle :

http://jsfiddle.net/4fu3q/

감사

출처

2012-09-07 Autolycus

이리? 점은 무엇인가"? – Chris

내가 만든 라디오 버튼 CSS에 텍스트를 넣으려고합니다. – Autolycus

할 수 없습니다. 입력 요소에는 자식 노드가 포함될 수 없습니다 (텍스트^1조차도 포함 할 수 없음). 이것을 필요로한다면,'input'을'div' (또는'span')로 감싸고 그 텍스트를 * input * 엘리먼트 안에 형제로서'input'에 넣을 필요가 있습니다. ** 1 : **'input type = "text"'*는 비슷한 값을 가질 수 있지만. –

내가 데이터 속성을 사용하십시오 : 당신의 CSS에 다음 <input data-value="Value Text">

과 :

각 입력에 HTML 속성을 사용 .ipad:before { content: attr(data-value); }

당신이 달성하려고하는 무엇

http://jsfiddle.net/4fu3q/3/

출처

2012-09-07 19:15:55 Thomas

할 수 있습니다 이상적에서 멀리 비록, 그것은 종류의 가짜. label을 사용하는 경우 클릭 빈도를 유지하면서 라디오 버튼 위에 텍스트를 오버레이 할 수 있습니다. 다음과 같은 뭔가가 한 예입니다 :

http://jsfiddle.net/4fu3q/2/

<div class="button-holder"> 
    <input type="radio" class="ipad big-radio" name="radioGroup" value="2081764" id="one"> 
    <label for="one">V1</label> 
</div>

label{ 
    position:relative; 
    left: -35px;  
    top: -10px; 
}

버튼 분명히 그것의 내부에 실제로 아니므로 텍스트에 맞게 크기를 다시하지 않습니다. 그것은 이상적이지만 자바 스크립트로 모든 것을 바꾸지 않고도 얻을 수있는만큼 가까이있을 수 있습니다.

출처

2012-09-07 19:13:12

사용자 정의 라디오 버튼 표시 값 내부

답변

관련 문제