이미지 라디오 버튼 만들기? css?
관련링크
본문
안녕하세요?
html 도 css도 왕초보입니다.
이미지 라디오 버튼 만들려고 하는데 구글링 해도.....단편적인 설명 뿐이어서 이해도 안되고.. ㅠㅠ
아래 링크를 보면 - 만들다가 도저히 못 만들겠네요
http://mykepco.com/cs/radio3.html <-- 안되는 링크
아래와 같이 박스 안에 모양처럼 만들고 싶어요~~
테이블 태그는 연습하고 있는 것입니다.
아래 소스는 찾아 모아서 만들다만 것입니다.
도와 주십시오^^
<!DOCTYPE <!DOCTYPE html>
<html>
<head>
<title>라디오버튼 만들기</title>
<style>
body {
.smile { margin-bottom: 28px; overflow: visible; }
.smile b { display: none; }
.smile input { margin-right: 2px; float: left; display: block; margin-top: 9px; }
.smile span { margin-right: 7px; }
.smile.s1 { background: url(./images/s1.png) 0 0 no-repeat; display: block; width: 103px; height: 28px; float: left; }
.smile.s2 { background: url(./images/s2.png) 0 0 no-repeat; display: block; width: 119px; height: 28px; float: left; }
.smile.s3 { background: url(./images/s3.png) 0 0 no-repeat; display: block; width: 113px; height: 28px; float: left; }
.smile.s4 { background: url(./images/s4.png) 0 0 no-repeat; display: block; width: 113px; height: 28px; float: left; }
}
</style>
</head>
<body>
<h3>먹고 싶은 것 하나만 선택-2</h3>
<hr>
<form action="text.html">
<label for="s1">
<input type="radio" name="smile" id="s1" value="jja">
매우만족
<img src="images/s1.png" alt="매우만족" /><br>
</label><label for="s2">
<input type="radio" name="smile" id="s2" value="jjam">
만족
<img src="images/s2.png" alt="만족" /><br>
</label><label for="s3">
<input type="radio" name="smile" id="s3" value="tangsuyuk">
보통
<img src="images/s3.png" alt="보통" /><br>
</label><label for="s4">
<input type="radio" name="smile" id="s4" value="tangsuyuk">
불만
<img src="images/s4.png" alt="불만" /><br>
<input type="submit" value="제출스">
</form>
<table class="smile">
<tr>
<td>
<label for="s1">
<input type="radio" name="smile" id="s1" value="jja">
<span class="s1"><b>s1</b></span>
</label>
</td>
<td>
<label for="s2">
<input type="radio" name="smile" id="s2" value="jjam">
<span class="s2"><b>s2</b></span>
</label>
</td>
<td>
<label for="s3">
<input type="radio" name="smile" id="s3" value="tangsuyuk">
<span class="s3"><b>s3</b></span>
</label>
</td>
<td>
<label for="s4">
<input type="radio" name="smile" id="s4" value="tangsuyuk">
<span class="s4"><b>s4</b></span>
</td>
</tr>
<input type="submit" value="제출스">
</table>
</body>
</html>
답변 1
일단 radio버튼 이미지화하는 부분 codepen에 찾아보시면
예제들 많이 있습니다.
Radio Button with Image VISA/MASTER (codepen.io)
개인적인 생각입니다만, 근데 저 위에 저기능을 구지 radio로 만들어야하나요?
그누보드의 좋아요,싫어요 처럼 만드는게 더 나은거 같은데-.-
이유는 답변결과를
--------------------------------------
답변자/매우좋아/좋아/보통/싫어요
--------------------------------------
홍길동 100/80/60/50
무지개 80/100/20/10
:
:
--------------------------------------
이렇게 받기 위함입니다.
==> 아주 간단하네요
위 소스에서 s1 등 글 대신 그림 <img src="images/s2.png</b>
링크하면 되네요..
==> 이렇게 쉬운 걸 몰랐다니........... 참 한심하네
답변을 작성하시기 전에 로그인 해주세요.
