<img/>를 포함한 disabled button

Vue로 제작한 개인정보 수정 창에서, 성별을 선택하는 Dropdown 버튼이 있는데, 이미 성별이 선택이 된 상황이면 버튼에 disabled속성을 넣어주었다.

<button 
	class="dropdown-btn"
	:disabled="gender">
    {{gender}}
    <img src="dropdown"/>
</button>

버튼이 클릭되었을 때 dropdown을 나타내게 하기 위해 기존 display:none인 속성에 CSS를 추가했다.

.dropdown-list {
    display: none;
}
.dropdown-btn:active .dropdown-list {
    display:block
}

문제는 버튼이 disabled상태일 때에도 클릭했을 때 이미지를 클릭했을 때 리스트가 보이는 것이다.

이러한 현상이 일어난 이유는 html에서 <img/> 태그는 disabled를 갖지 못했고, 오직 form형태의 태그들만 사용이 가능했다.
이미지는 클릭이 되니깐 바깥 button의 active로 처리가 된다.

문제 해결은 단순했다. 이미지를 img 태그가 아닌, <input type="image"/> 형태로 수정하는 것이었고, disabled 상태를 가질 수 있었다.

<button 
	class="dropdown-btn"
	:disabled="gender">
    {{gender}}
    <input 
    	type="image"
        src="dropdown"
        :disabled="gender"/>
</button>

html 태그들 중 disabled속성을 가질 수 있는 것이 form태그들 뿐이란 것을 오늘 삽질하며 알았다.

disabled를 쓰려면 <textarea>, <input>, <select> 등등에만 쓰기로~

참고 : https://www.daniweb.com/digital-media/ui-ux-design/threads/71161/does-img-tag-has-disable-property