I'm

Developer, Designer, Photographer

GET IN TOUCH

  • Buk-gu, Busan, Republic of Korea
  • ungdoli0916@naver.com
  • Kakao ID : Ungdoli
Your message has been sent. Thank you!
(즐거웅코드) CSS radio를 button처럼 사용하기

· 즐거'웅' 코드 (Source)/HTML & CSS & JAVASCRIPT
2021. 7. 1. 16:29

반응형

[즐거'웅'코드] 목차

  1. 예제 소스
  2. 구현 예시
예제 소스
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
<style>
    .test_obj input[type="radio"] {
        display: none;
    }
 
    .test_obj input[type="radio"] + span {
        display: inline-block;
        padding: 15px 10px;
        border: 1px solid #dfdfdf;
        background-color: #ffffff;
        text-align: center;
        cursor: pointer;
    }
 
    .test_obj input[type="radio"]:checked + span {
        background-color: #113a6b;
        color: #ffffff;
    }
</style>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="apple">
    <span>사과</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="banana">
    <span>바나나</span>
</label>
 
<label class="test_obj">
    <input type="radio" name="fruit" value="lemon">
    <span>레몬</span>
</label>
구현 예시
반응형
저작자표시

'· 즐거'웅' 코드 (Source) > HTML & CSS & JAVASCRIPT' 카테고리의 다른 글

(즐거웅코드) CSS select box 오전/오후 시간 선택 placeholder 만들기  (0) 2021.07.03
(즐거웅코드) CSS select box placeholder 만들기  (0) 2021.07.03
(즐거웅코드) 제이쿼리 특정 객체 Y축 위치 가져오기  (0) 2021.06.30
(즐거웅코드) 제이쿼리 특정 객체 X축 위치 가져오기  (0) 2021.06.29
(즐거웅코드) 제이쿼리 특정 class를 가진 객체 유무 확인하기  (0) 2021.06.28

관련글

댓글 0

티스토리툴바