레이블 및 이미지 국경 반경과 테두리 유혹하지

Question

Jsfiddle

HTML을

<label for="home" class="prof"> 
<img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" /> 
</label> 
<input type="radio" name="type" value="home" id="home"> 
<label for="home" class="type">House Owner</label> 

CSS

.image-label{ 
    width: 168px; 
    height: 168px; 
    border-radius: 100%; 
} 

input[type="radio"]:not(:checked), 
input[type="radio"]:checked { 
    visibility: hidden; 
} 

label { 
    position: relative; 
    display: inline-block; 
    cursor: pointer; 
    float: left; 
    text-align: center; 
    width: 200px; 
} 

input[type=radio] + .prof img:hover { 
    border: 15px solid red; 
    border-radius: 100%; 
} 
input[type=radio]:checked + .prof img { 
    border: 15px solid red; 
    border-radius: 100%; 
} 
input[type=radio]:checked + .prof img:hover { 
    border: 15px solid red; 
    border-radius: 100%; 
} 

표시 테두리 색상 테두리 반경을 할 때 가져가 이미지 나 클릭 후 틱이 나타납니다. 경계선이있는 테두리 반경이 이미지에 표시되지 않는 것 같습니다. 나는 로컬에서 배경 이미지로 레이블을 시도했기 때문에 효과가있었습니다. 그러나 라벨에 배경 이미지를 사용하면 절대 위치 지정에도 불구하고 진드기가 잘못 배치되었습니다.

감사합니다.

Answer 1

사용 <input>의 형제 자매 <label> 전에.

<input type="radio" name="type" value="home" id="home"> 

<label for="home" class="prof"> 
    <img src="http://bigbackground.com/wp-content/uploads/2013/05/modern-house.jpg" class="image-label" /> 
</label> 

<label for="home" class="type">House Owner</label> 

---

http://jsfiddle.net/W4XTj/1/

FYI는 상기 + 선택기는 이후 형제 요소를 선택한다.

input[type=radio] + .prof 

이것은 class="prof"이 이후 (안 전)있는 형제 요소 그것은 모든 형제 요소를 선택 위한 CSS3의 표준 규격이 없다는 것을 너무 나쁜 년대 <input tpe="radio">

---

을 선택합니다.

Answer 2

함께 시도해보십시오.

라벨 IMG {국경 : 2 픽셀 고체 #fff;}

라벨 IMG : 가져가 {국경 : 2 픽셀 고체 # 333;}