잠시만 기다려 주세요

전체검색 :  
HOME   |  여기는?   |  바다물때표   |  알림 (4)  |  여러가지 팁 (921)  |  추천 및 재미 (172)  |  자료실 (20)  |  끄적거림 (569)  |  시나리오 (760)  |  드라마 대본 (248)  |  

    html/css/xml

html/css/xml - css 전원 스위치 on/off 버튼, toggle switch 버튼, 토글스위치
이 름 : 바다아이   |   조회수 : 2728         짧은 주소 : https://www.bada-ie.com/su/?671591780431
1.png - 18 KB   다운수 : 32 회




<!DOCTYPE html>
<html>
<head>
<style>
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px; 
}
/*스위치바탕 ie에서 테두리생김방지*/
.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition:.4s;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background: white;
  transition: .4s;
}

/*체크된(on된)스위치바탕*/
input:checked + .slider {
  background: #2196F3;
}
/*스위치버튼을 클릭하면 버튼주위에 글로우효과*/
input:focus + .slider {
  box-shadow: 0 0 3px #2196F3;
}
/*스위치버튼을 클릭하면 우측으로 26px이동*/
input:checked + .slider:before {
  transform: translateX(26px);
}

/*Rounded sliders*/
.slider.round {
  border-radius: 34px;
}
/*스위치버튼 안쪽에 동그란모양*/
.slider.round:before {
  border-radius: 50%;
}
</style>
</head>
<body>

<h2>Toggle Switch</h2>

<label class="switch">
  <input type="checkbox">
  <div class="slider"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider"></div>
</label><br><br>

<label class="switch">
  <input type="checkbox">
  <div class="slider round"></div>
</label>

<label class="switch">
  <input type="checkbox" checked>
  <div class="slider round"></div>
</label>

</body>
</html>



출처 : https://m.blog.naver.com/pjh445/220800130429
| |


      1 page / 2 page
번 호 카테고리 제 목 이름 조회수
45 html/css/xml robots.txt, ... 바다아이 160
44 html/css/xml CSS / letter-spacing, word-spacing / , , 바다아이 909
43 html/css/xml ie , ... 바다아이 945
42 html/css/xml html tab , .... 바다아이 2421
현재글 html/css/xml css on/off , toggle switch , 바다아이 2729
40 html/css/xml pt, px, em, %, font , , 바다아이 2742
39 html/css/xml (font face) 바다아이 3003
38 html/css/xml .... 바다아이 3213
37 html/css/xml html MIME ... 바다아이 3437
36 html/css/xml ckeditor ajax .... 바다아이 3247
35 html/css/xml [] , 바다아이 3481
34 html/css/xml , , , ico 바다아이 3148
33 html/css/xml input , autocomplete 바다아이 3335
32 html/css/xml [CSS] , border-radius, 바다아이 3810
31 html/css/xml ckeditor 4 ... 바다아이 4670
30 html/css/xml HTTP/2 ? 바다아이 4479
29 html/css/xml HTTP/2 ? 바다아이 3590
28 html/css/xml xml .... sitemap.xml 바다아이 3713
27 html/css/xml ckeditor config.js .... 바다아이 4039
26 html/css/xml 바다아이 3878
25 html/css/xml 바다아이 3640
24 html/css/xml , border 바다아이 3578
23 html/css/xml , 바다아이 3687
22 html/css/xml (= HTML ), entity code 바다아이 4415
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 4616
20 html/css/xml 바다아이 3811
19 html/css/xml / / 바다아이 4176
18 html/css/xml css3 ... demo . ^^; 바다아이 3562
17 html/css/xml mouse over , Hover Fade Effect using CSS 바다아이 5559
16 html/css/xml [html] TD TR , mouse over 바다아이 4132
| |








Copyright ⓒ 2001.12. bada-ie.com. All rights reserved.
이 사이트는 리눅스에서 firefox 기준으로 작성되었습니다. 기타 브라우저에서는 다르게 보일 수 있습니다.
[ Ubuntu + GoLang + PostgreSQL ]
서버위치 : 오라클 클라우드 춘천  실행시간 : 0.03233
to webmaster... gogo sea. gogo sea.