잠시만 기다려 주세요

     '책임지지 않는 윤석열 정부를 규탄한다. 입만 벌리면 거짓말.. 범죄 의혹 한트럭... 자신들의 범죄 의혹을 철저히 숨기는 윤석열 정부를 탄핵하자.'
전체검색 :  
이번주 로또 및 연금번호 발생!!   |  HOME   |  여기는?   |  바다물때표   |  알림 (16)  |  여러가지 팁 (1060)  |  추천 및 재미 (156)  |  자료실 (22)  |  
시사, 이슈, 칼럼, 평론, 비평 (615)  |  끄적거림 (136)  |  문예 창작 (716)  |  바람 따라 (75)  |  시나리오 (760)  |  드라마 대본 (248)  |  
살인!


    html/css/xml

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




<!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 ... 바다아이 2476
47 html/css/xml ckeditor css ,,, .. ckeditor 바다아이 3763
46 html/css/xml ckeditor font size , ckeditor , ckeditor <br>, width height . 바다아이 4988
45 html/css/xml robots.txt, ... 바다아이 6894
44 html/css/xml CSS / letter-spacing, word-spacing / , , 바다아이 6991
43 html/css/xml ie , ... 바다아이 7047
42 html/css/xml html tab , .... 바다아이 11767
현재글 html/css/xml css on/off , toggle switch , 바다아이 9103
40 html/css/xml pt, px, em, %, font , , 바다아이 8808
39 html/css/xml (font face) 바다아이 8944
38 html/css/xml .... 바다아이 9134
37 html/css/xml html MIME ... 바다아이 11822
36 html/css/xml ckeditor ajax .... 바다아이 9464
35 html/css/xml [] , 바다아이 12807
34 html/css/xml , , , ico 바다아이 8988
33 html/css/xml input , autocomplete 바다아이 9488
32 html/css/xml [CSS] , border-radius, 바다아이 10465
31 html/css/xml ckeditor 4 ... 바다아이 11271
30 html/css/xml HTTP/2 ? 바다아이 17277
29 html/css/xml HTTP/2 ? 바다아이 9323
28 html/css/xml xml .... sitemap.xml 바다아이 9255
27 html/css/xml ckeditor config.js .... 바다아이 10157
26 html/css/xml 바다아이 10023
25 html/css/xml 바다아이 9159
24 html/css/xml , border 바다아이 9211
23 html/css/xml , 바다아이 9929
22 html/css/xml (= HTML ), entity code 바다아이 10195
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 13135
20 html/css/xml 바다아이 9683
19 html/css/xml / / 바다아이 10122
| |









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