안녕하세요. ^-^
오늘은 css 하면서 정~~말
맘에 들지 않았던 input의 type중
checkbox와 radio 버튼을
커스텀 !! 내 맘대로 만들어 볼게요.
checkbox와 radio버튼 만들어보신 분들
아시겠지만 참 커스텀이 어렵습니다.
색깔 바꾸기도 어렵고 말이죠.
그래서 저는 input은 그냥 감춰두고
lable을 이용해서 커스텀을 해볼 거예요.
일단 [ html ] 과 [ css ] 코드를 함께 보시죠
|
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
|
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
input{
display:none;
}
input + label{
display:block;
color:#392020;
height:31px;
padding-left:40px;
line-height:25px;background:url(images/radiobtn_off.svg) no-repeat 0 0;
background-size:contain;
margin:10px 0;
}
input:checked + label{
background:url(images/radiobtn_on.svg) no-repeat 0 0;
}
</style>
</head>
<body>
<section>
<input id="radio" type="checkbox">
<label for="radio">radio button</label>
</section>
<script src="jquery-3.6.2.min.js"></script>
</body>
</html>
|
cs |
코드 자체는 참으로 간단합니다.
그리고 복사해서 가져다 쓰셔도 적용이 참 잘되요.
아주 커다란 장점이죠 !!
먼저 input은 커스텀하기 너무 어렵기 때문에
display:none으로 없애 버릴 거예요.
하지만 input 값에 들어가는 checked값은 꼭 필요하기 때문에
인풋을 아예 쓰지 않을 수는 없답니다.
lable에 있는 for와 input의 id값으로 연결을 하면
lable을 눌러도 input에 checked가 찍히죠
이것을 이용해서 만들어 볼 거예요.
이미지는 간단하기 이렇게 만들어 봤어요.
padding-left:40px은 왼쪽에 백그라운드 이미지가 들어가야 하기 때문이에요.
이미지와 글자사이의 간격을 늘리고 싶다면
padding-left 값을 높여 주면 됩니다.
그리고 또 중요한 부분은
bakcground:url() no-repeat 0 0 입니다.
여기서 0 0은 위치값인데요
top:0 left:0과 같은 의미입니다.
왼쪽 상단에 고정하지 않으면
이미지의 위치가 달라져서 이상하게 나올 수 있어요.
실행을 시켜보면 첫 이미지는 off이미지입니다.
누르면 input에 cheched가 찍히면서 이미지가 변하게 돼요.
한번 더 누르면 chedched가 풀리면서 off이미지로 되돌아오게 되죠.
아주 간단하죠?
이렇게 완성이 됩니다.
이미지는 원하시는 이미지로 쓰시면 되기 때문에
마음에 들게 커스텀이 가능합니다.
오늘도 즐거운 하루 건강한 하루 그리고
행복한 하루 보내세요. !!
'코딩 어린이의 노트' 카테고리의 다른 글
| css로 animation을 만들어 보자 첫번째 (2) | 2023.03.03 |
|---|---|
| scroll bar 커스텀 하기 (6) | 2023.02.26 |
| jquery 반응형 resize만들기 (2) | 2023.02.18 |
| 클립보드를 이용한 내용 복사 (2) | 2023.02.17 |
| 그라데이션 박스에 투명 테두리 넣어주기 (0) | 2023.02.12 |