文章彙整

利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式

By Astral Web 2 months agoNo Comments
首頁  /  網站設計與開發  /  利用checkbox做判斷改變CSS樣式並更改checkbox本身樣式

首先,讓我們看看我們完成的樣子,當點擊左上角的按鈕時(注意:他是一個input喔!)。

 

HTML:

(這個圖片會隨機變換,每一次重新載入就會更換)

<label for=”toggle-1″>I’m a input checkbox</label>

       <input type=”checkbox” id=”toggle-1″>

       <br />

       <img src=”https://source.unsplash.com/random/1920×1080″  />

 

我們必須用<label>去更改checkbox的樣式。

CSS:

  1. 把checkbox的勾選框隱藏。
  2. 將label樣式改成按鈕。
  3. 他們綁定的關係是 label 的 for 和 input 的 id。

input[type=checkbox] {

  position: absolute;

  top: -9999px;

  left: -9999px;

}

label {

 -webkit-appearance: push-button;

 -moz-appearance: button;

 display: inline-block;

 margin: 20px 0 10px 0;

 cursor: pointer;

 padding: 10px;

}

img {

 width: 1920px;

 height: 1080px;;

}

 

顯示為:

接著最後做出當checkbox被選取時的效果:

CSS:

input:checked + br + img {

 width: 500px;

 height: 500px;

 object-fit: cover;

 object-position: left-top;

 transition: width 2s, height 4s;

}

 

再給圖片一個過渡效果:

CSS:

img {

  transition: 2s;

}

 

即完成:

 

以上就是我們這次的介紹,如果有其他想暸解認識的電商、網站相關主題,都歡迎留言讓我們知道,或者需要相關服務,歐斯瑞團隊將非常樂意替您解決!

以上內容由Astralweb 歐斯瑞編寫製作

 000

推薦文章

Category:
  網站設計與開發

留下回應

你的電子郵件地址不會被公開.

取得獨家電子商務祕技

建立更好的策略靈感

跟上全球的網路趨勢

絕佳的電商解決方案

電子商務戰略全指南

每月發送電商戰略指南,只要填寫E-mail即可訂閱!

請到您的信箱確認,即可完成訂閱。