잠시만 기다려 주세요


 
HOME   |  여기는?   |  바다물때표   |  여러가지 팁 (750)  |  자료실 (30)  |  끄적거림 (101)  |  

2019년 01월 20일
거짓말의 습관은 무섭다. 적게 말하고 어떤 말이든 말하기 전에 생각해라... 무엇보다 언제나 항상 깨어 있어야 실수가 없다. - 바다아이
 

    html/css/xml

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




<!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
번 호 카테고리 제 목 이름 조회수
42 html/css/xml html tab , .... 바다아이 115
현재글 html/css/xml css on/off , toggle switch , 바다아이 129
40 html/css/xml pt, px, em, %, font 바다아이 206
39 html/css/xml (font face) 바다아이 473
38 html/css/xml .... 바다아이 491
37 html/css/xml html MIME ... 바다아이 513
36 html/css/xml ckeditor ajax .... 바다아이 486
35 html/css/xml [] , 바다아이 575
34 html/css/xml , , , ico 바다아이 576
33 html/css/xml input , autocomplete 바다아이 523
32 html/css/xml [CSS] , border-radius, 바다아이 810
31 html/css/xml ckeditor 4 ... 바다아이 1020
30 html/css/xml HTTP/2 ? 바다아이 944
29 html/css/xml HTTP/2 ? 바다아이 889
28 html/css/xml xml .... sitemap.xml 바다아이 1054
27 html/css/xml ckeditor config.js .... 바다아이 1293
26 html/css/xml 바다아이 1375
25 html/css/xml 바다아이 1181
24 html/css/xml , border 바다아이 1284
23 html/css/xml , 바다아이 1259
22 html/css/xml (= HTML ), entity code 바다아이 1672
21 html/css/xml (Won;) (;Backslash; ) , , 바다아이 1370
20 html/css/xml 바다아이 1243
19 html/css/xml / / 바다아이 1428
18 html/css/xml css3 ... demo . ^^; 바다아이 1227
17 html/css/xml mouse over , Hover Fade Effect using CSS 바다아이 1692
16 html/css/xml [html] TD TR , mouse over 바다아이 1328
15 html/css/xml , (marquee) 바다아이 1539
14 html/css/xml scroll , 바다아이 1408
13 html/css/xml ckeditor , , 바다아이 2095
| |






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