잠시만 기다려 주세요

     '입만 나불거리고 행동하지 않는 야당을 규탄한다.'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (19)  |  여러가지 팁 (1095)  |  추천 및 재미 (163)  |  자료실 (28)  |  
시사, 이슈, 칼럼, 평론, 비평 (795)  |  끄적거림 (142)  |  문예 창작 (719)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!


    html/css/xml

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




<!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
번 호 카테고리 제 목 이름 조회수
48 html/css/xml ... 바다아이 3556
47 html/css/xml ckeditor css ,,, .. ckeditor 바다아이 4727
46 html/css/xml ckeditor font size , ckeditor , ckeditor <br>, width height . 바다아이 5978
45 html/css/xml robots.txt, ... 바다아이 8458
44 html/css/xml CSS / letter-spacing, word-spacing / , , 바다아이 8157
43 html/css/xml ie , ... 바다아이 7914
42 html/css/xml html tab , .... 바다아이 14924
현재글 html/css/xml css on/off , toggle switch , 바다아이 9986
40 html/css/xml pt, px, em, %, font , , 바다아이 9895
39 html/css/xml (font face) 바다아이 9983
38 html/css/xml .... 바다아이 9954
37 html/css/xml html MIME ... 바다아이 14135
36 html/css/xml ckeditor ajax .... 바다아이 10493
35 html/css/xml [] , 바다아이 14278
34 html/css/xml , , , ico 바다아이 9881
33 html/css/xml input , autocomplete 바다아이 10659
32 html/css/xml [CSS] , border-radius, 바다아이 11625
31 html/css/xml ckeditor 4 ... 바다아이 12192
30 html/css/xml HTTP/2 ? 바다아이 19609
29 html/css/xml HTTP/2 ? 바다아이 10367
28 html/css/xml xml .... sitemap.xml 바다아이 10361
27 html/css/xml ckeditor config.js .... 바다아이 11465
26 html/css/xml 바다아이 11215
25 html/css/xml 바다아이 10169
24 html/css/xml , border 바다아이 10601
23 html/css/xml , 바다아이 11034
22 html/css/xml (= HTML ), entity code 바다아이 11383
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 16020
20 html/css/xml 바다아이 10813
19 html/css/xml / / 바다아이 11420
| |









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