程式設計 – 薯薯推薦 https:// 票券優惠、排行比價 Thu, 12 Jan 2023 13:05:00 +0000 zh-TW hourly 1 https://wordpress.org/?v=6.5 https://i0.wp.com//wp-content/uploads/2022/01/cropped-LOGO_工作區域-1-1.png?fit=32%2C32&ssl=1 程式設計 – 薯薯推薦 https:// 32 32 187861033 2022 六角學院 JS 直播班[心得分享] https:///2022-js-hexschool/ Thu, 01 Dec 2022 13:19:58 +0000 https:///?p=2675 我在今年 9/30 ~ 11/25，我參加了 2022 六角學院 JS 直播班，每週三、五各有課程，在開始分享心得之前先來說說結論。

我個人覺得，課程內容非常紮實而且實用！講師也非常有耐心，講得很詳細易懂，推薦對於已經有一點網頁設計基礎、想要邁向前端工程師的人，這門課真的非常值得參加！

當初為什麼報名 JS 直播班？

我原本其實就會一些網頁設計，像是 HTML、CSS 的切版，當時的 JS 能力大概頂多就是跟使用者互動的事件，例如 onclick 事件、onscroll 事件等等。

即使這樣的能力在網頁設計師的職缺已經算是堪用，但實際上 JS 能力相當侷限。當我想要繼續往前端工程師邁進的時候，就發現自己能力遠遠不足，甚至很多工作都已經需要前端框架的能力才能應徵了QQ

因此在開始學習前端框架之前，我決定先回頭來打好 JS 基礎，讓自己最起碼可以用原生 JS 來撰寫專案，避免提前學習前端框架也學得太辛苦。

參加六角學院直播班跟其他課程的差異

我覺得最大的差別有這些：

  1. 每堂課都是重點
  2. 老師和助教讓你問到飽
  3. 有分組，讓你更有動力

1. 每堂課都是重點

這也是我當初選擇這門課的最大原因，購買之前，他們有釋出每週的教學重點，我之前對於資料串接、資料處理是完完全全零經驗，想跨到前端工程師，資料處理是必備的技能！

不過因為我本身就有 JS 基礎，所以前 4 週的課程對我來說都只是複習，輕輕鬆鬆就度過，但到後面其實也有點吃力，是內容非常豐富的課程，我們也需要在課後花大量時間練習，才能把技術內化成自己的能力。

2. 老師和助教讓你問到飽

直播課的時候，就可以即時提問，六角學院校長廖洧杰是真的非常有耐心，無論多基礎的問題都會耐心回答，這點也真的是令人佩服！

有的可能幾分鐘前講過的東西，又有人重複提問，老師也會再簡單重複一遍，這個我直接被圈粉，以後有他的課我一定上爆！

課後也隨時都有 Discord 平台，讓你可以線上提問，由老師或助教替你解惑，有些網友們也很熱情，也會協助你解決你的問題喔！

Discord 平台隨時發問
Discord 平台隨時發問

3. 有分組，讓你更有動力

說來慚愧，我是組員裡面最雷的，但我是真的抓不出時間啊啊啊~~~

為了讓我的職業生涯盡快上軌道，還要花時間練習。老實說這樣已經覺得很操了，實在是找不出時間參加組員間的討論QQ

但分組就會讓你有一種，盡可能不要落後太多的感覺，作業也會盡量準時交，跟上大家的腳步，至少事後回頭看他們的討論串，也可以看得懂或有點收穫喔！

看到這裡迫不及待想要前往六角學院看看嗎？

👉前往六角學院

第一週~第九週的學習過程

因為課程時間上比較難配合，而且礙於上班族的時間真的真的很少，所以最後我正課全部蹺掉，週末才用 2 倍速看完課程，然後再靠自己好好練習。

有時候週末也有其他事情，就會搞到真的是覺得很操XD 而且我已經是做課程最低門檻的主線任務，都還是覺得有點操，真的不知道其他人到底怎麼有辦法花時間還參加專題班OAO

神人太多，只能說，套一句廖洧杰老師送給我們的話：跟自己比較！

最大的收獲是？

我覺得最大的收穫，應該還是讓我能順利求職並且把技能應用上吧！

畢竟我參加的首要目標也是找到一份前端工程師工作，雖然那些 Vue 前端框架都不會的情況下，能投履歷的職缺不多，但很幸運地，在還沒上完課程就找到工作了！

這段時間很明顯感受到自己 JS 的能力跟上課之前差異多大！從一個只會介面設計的網頁設計師，變成一個能寫出功能、串資料、整理資料的工程師，而且在工作上可以直接現學現賣，絕對是我收穫最大的部分！

六角學院 JS 直播班
六角學院 JS 直播班

如果時光能倒流，會希望自己再次注意哪些細節？

如果時光能倒流，應該還是會採用相同的聽課方式跟寫作業方式，時間不夠用也有時間不夠用的學習安排XD

但我應該會告訴自己，這門課真的太值得了，再怎麼沒時間也非報名不可啊XD

畢竟能學到讓你在工作上可以現學現賣的內容，表示這門課真的非常實用呢！！

程式線上課程推薦
程式線上課程推薦

對課程的建議或鼓勵？

大推六角學院校長廖洧杰帶的課程！！

洧杰老師是我目前上過的線上課程裡面，最有耐心、最會教的老師，而且講的內容都非常詳細，艱深的東西也能用最簡單的方式來讓大家理解，我個人認為，他的課絕對值回票價！

身為學長姐，分享些想入坑的新同學一些勉勵的話

最後也要勉勵大家，雖然老師很會教，程式的東西最後如果要進到自己的長期記憶，還是必須要靠大量的練習，雖然洧杰老師建議一個題目要練個十遍、二十遍，但真的沒時間的話，我是採用每週練習相同題目，盡量讓自己不要忘太快。

讓我們一起朝向下一個工程師的里程碑邁進吧！謝謝洧杰老師、謝謝六角學院！

👉前往六角學院

延伸閱讀：

]]> 2675 Font Awesome 教學-Icon圖示取代文字的按鈕 https:///btn-with-font-awesome/ Mon, 01 Mar 2021 00:30:00 +0000 https:///?p=1052 大部分系統設計時的按鈕還是以文字為主，原因是避免操作的人誤會圖示的意義，尤其在游標移到按鈕上時沒有顯示註解文字，操作失誤造成的後果肯定無法想像！

不過有次主管則是希望我把最簡單、不會誤會的按鈕，改成圖示，例如「搜尋」按鈕用放大鏡；「刪除」就用垃圾桶圖示顯示。

這種依照目前絕大多數的使用習慣來說，已經幾乎不會理解錯誤了，就可以直接用圖示取代文字呦！

但像是新增、選擇、全選等，有時候圖示選得不夠精確，加上並排顯示時會不太清楚，這時候如果使用者因為怕按錯而產生疑惑，就很明顯表示這個圖示按鈕絕對是設計不良囉！

這篇就來教你如何將文字類型的按鈕，透過Font Awesome來改成圖示類型的按鈕吧！

按鈕基本樣式製作

這邊就以「搜尋」按鈕為例，我們先把文字類型按鈕完成吧！

HTML部分：

<!-- HTML -->

<div>這是原本按鈕樣式</div>
<div class="btnI1">
    <input type="button" value="搜尋" class="ctrlbutton">
</div>

CSS部分：

/* CSS */

/* 按鈕美化基本樣式調整 */
.ctrlbutton {
    display: inline-block;
    margin: 5px 3px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 2px 13px;
    font-size: 14px;
    line-height: 30px;
    min-height: 35px;
    border-radius: 2px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #ffffff;
    background-color: rgb(148, 190, 214);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 2px 2px 3px grey;
    border: none;
    padding-right: 11px;
}

/* 游標移動到按鈕上時的樣式變化 */
.ctrlbutton:hover {
    color: white;
    box-shadow: none;
    border: none;
    background-color: rgb(124, 170, 195);
}

以上程式碼完成樣式如下：

search button原始樣式
search button原始樣式

接下來我們將Font Awesome插入我們的網站，
並且使用它。

如何嵌入Font Awesome圖示

可以到Google瀏覽器直接搜尋，輸入「font awesome cdn」，第一個看到「Setup Webfont with CDN | Font Awesome」就是了。

Font Awesome CDN
Font Awesome CDN

補充：
cdn的意思就是只要用一行程式碼嵌入，你就可以直接使用網站上的內容了。

所以我們進入網頁後向下捲動，尋找到cdn區塊中有<link>標籤開頭的，就是我們要找出來複製放進我們程式碼的內容：

Font Awesome CDN
Font Awesome CDN

於是複製這行之後，回到我們HTML的<head>與</head>標籤之間貼上，貼上範例如下：

<!-- HTML -->
<!-- 紅色字體為修改的內容 -->

<head>
    <meta charset="utf-8" />
    <title>test</title>

    <!-- 在這裡貼上 -->
    <link rel="stylesheet" href="https://pro.fontawesome.com/releases/v5.10.0/css/all.css" integrity="sha384-AYmEC3Yw5cVb3ZcuHtOA93w35dYTsvhLPVnYs9eStHfGJvOvKxVfELGroGkvsg+p" crossorigin="anonymous"/>

    <link rel="stylesheet" type="text/css" href="/tag/程式設計/feed/Style1.css" />
</head>

這樣就可以開始使用囉！

Font Awesome圖示實作步驟

接下來，我們前往Font Awesome找尋我們要的icon，Font Awesome網站連結：https://fontawesome.com/

進入網站後上方導覽列點選「Icons」頁籤：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

這時候就可以看到好多現有的icons供你選擇，還可以直接搜尋想要的icon噢！

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

我們直接搜尋「搜尋」的關鍵字「search」，就會發現有很多放大鏡相關的圖示出現。

這邊小提醒，游標移到圖示上時，如果右上角有「PRO」字樣表示是要付費才能使用的呦！

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

因此這邊我們用第一個免費的圖示點進去，免費版也只有一種粗細，確定使用這個的話就按下「Start Using This Icon」按鈕：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

彈出視窗後，這個<i>標籤就是我們要的了！

因此按下複製按鈕：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

就可以回到我們的HTML程式碼，在想要加入圖示的地方貼上<i>標籤，同時要把<input>標籤的value屬性留空，才不會還有文字在噢：

<!-- HTML -->

<div>這是原本按鈕樣式</div>
<div class="btnI1">

    <!-- 貼上圖示的程式碼 -->
    <i class="fas fa-search"></i>

    <!-- 將value的「搜尋」兩個文字拿掉 -->
    <input type="button" value="" class="ctrlbutton">
</div>

這時候會暫時呈現這樣：

Font Awesome插入圖示步驟
Font Awesome插入圖示步驟

看起來雖然暫時是壞的，但這個步驟的重點是，那個放大鏡有成功顯示出來就完成icon的嵌入囉！

修正Font Awesome圖示與按鈕

接下來，因為放大鏡目前是與按鈕並排呈現，我們要將放大鏡放入按鈕中，並把按鈕寬度放大到適當的大小。

這時候要用上position:relative和position:absolute相對位置的屬性來呈現。

還不知道這兩個屬性怎麼使用的話，可以點選下方連結看我們另一篇的教學，先認識一下這兩個屬性呦！

(延伸閱讀：CSS position 屬性教學：relative和absolute實作)

於是最終的所有CSS如下，紅色字體為有修改的內容：

/*CSS*/
/* 紅色字體為本次修改內容 */

.ctrlbutton {
    display: inline-block;
    margin: 5px 3px;
    font-weight: 400;
    text-align: left;
    white-space: nowrap;
    vertical-align: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    padding: 2px 13px;
    font-size: 14px;
    line-height: 30px;
    min-height: 35px;
    border-radius: 2px;
    transition: color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out;
    color: #ffffff;
    background-color: rgb(148, 190, 214);
    border-radius: 8px;
    cursor: pointer;
    letter-spacing: 2px;
    box-shadow: 2px 2px 3px grey;
    border: none;
    padding-right: 11px;

    /* 新增按鈕寬度 */
    width: 60px;
}

/* 當圖示被游標覆蓋時，它同層的下一個標籤狀態改變 */
i:hover + .ctrlbutton, .ctrlbutton:hover {
    color: white;
    box-shadow: none;
    border: none;
    background-color: rgb(124, 170, 195);
}

/* 設外層為基準位置 */
.btnI1{
  position: relative;
}


/* 放大鏡設為相對位置 */
i.fa-search{
  position: absolute;
  top: 16px;
  left: 26px;
  color: white;
}


/* 游標移動到圖示時，游標改變 */
i.fa-search:hover{
  cursor: pointer;
}

完成樣式如下：

Font Awesome插入圖示完成樣式
Font Awesome插入圖示
完成樣式

總結

以上就是整個Font Awesome的應用方式，以及如何將圖示放在按鈕上的教學。

Font Awesome相當好用，唯一的限制大概就是如果要用到大量的圖示，並且通通放在同一個系統，有時候發現付費的圖示比較好看的時候，就要考慮付費還是自己畫了。

如果是公司遇上有一些付費圖示想使用，但公司沒有美工能作圖或沒有多餘時間的時候，建議可以直接變成付費會員，不僅未來開發系統的運用上變得相當便利、提高一致性，同時也是以行動支持這些資訊應用平台的好方法呦！

]]> 1052 CSS position 屬性教學：relative和absolute實作 https:///css-position-relative-absolute/ Mon, 22 Feb 2021 00:30:00 +0000 https:///?p=876 CSS的position屬性可以讓你設定位置，常用的包含以下四種：

  • fixed
  • sticky
  • relative
  • absolute

其中，前兩者普遍用於網頁導覽列、彈跳視窗等功能；
後兩者則可以用在各式各樣的相對位置當中，是個非常實用的排版屬性！

這篇主要帶大家了解relative和absolute屬性，以及相對位置究竟該怎麼進行設定吧！

CSS position 相對位置入門定義

相對位置的概念，我們以最粗糙的舉例來說：

視窗內出現英文字母並呈現：「AB」
我們如果先放上「A」為基準位置，並把「B」設在「A」的右邊，呈現出來就會是「AB」了。

此時的「A」作為基準，因此「A」的CSS設定即為position:relative;
而「B」相對於「A」放置在右邊，因此「B」的CSS設定即為position:absolute;

但事實上CSS實作還包括了內外關係，也就是說通常外層是position:relative; 內層為position:absolute; 內層的內容就會以外層的左上角為基準進行相對於外層的移動。

position relative和absolute實作範例

這裡帶大家實作一個最簡單的範例，讓大家方便理解兩者相對位置關係。

首先，HTML部分放上兩層的div，分別給予class，內容皆留空即可：

<!-- HTML -->

<div class="relative_outside">
  <div class="absolute_inside">
    <!-- 留空 -->
  </div>
</div>

接下來，先完成最基本的class設定：

/* CSS */

/* 紅色外層 */
.relative_outside{
  position: relative; /* 基準設為relative */
  width: 100px;
  height: 100px;
  background: red; /* 設為紅色 */
}

/* 綠色內層 */
.absolute_inside{
  position: absolute; /* 相對者設為absolute */
  width: 100px;
  height: 100px;
  background: green; /* 設為綠色 */
}

設完HTML和CSS後，你會了解到幾件事：

  1. 現在有兩個寬高皆為100的正方形，一個是外層紅色、一個是內層綠色。
  2. 外層紅色正方形當作基準；
    內層綠色正方形為相對於紅色正方形的相對物件。
  3. 兩者有階層關係，綠色雖然大小相同，但實際上HTML是在內層。

此時設定完會長這樣：

position相對位置屬性範例
position相對位置屬性範例

沒錯，目前只看到一個綠色正方形，原因是紅色正方形和綠色正方形的位置相同、大小也相同，因此綠色正方形蓋在紅色正方形上面。

透過absolute新增位置屬性錯開位置

接下來，我們將position:absolute;的綠色正方形，加上top和left的位置屬性，top屬性：垂直與上方的距離；left屬性：水平與左邊的距離。

新增如下：

/* CSS */

/* 綠色內層 */
.absolute_inside{
  position: absolute;
  width: 100px;
  height: 100px;
  background: green;

  /* 加上下面兩個屬性 */
  top: 100px;
  left: 100px;
}

這時候的意思就是，綠色的正方形會相對於紅色正方形往下推100px以及往右推100px。

position相對位置屬性範例
position相對位置屬性範例

完成就會是上圖所示，可以將這個範例的程式碼放到你的程式碼進行測試，並且玩玩看修改top和left屬性，就會更好理解相對位置的功用了。

相對位置以座標來解釋

如果還是覺得有點模糊難以理解，我個人覺得也許比較好的解釋就是用座標來看。

CSS世界中，物件的左上角可以視為XY座標的(0,0)，該物件內容則是從(0,0)開始往右、往下延展出一個物件。

也就是例如紅色正方形，是從左上角(0,0)各延展100px而生成這個正方形的；綠色也是同樣概念延展出正方形。

position相對位置屬性範例
position相對位置屬性範例

紅色正方形左上角為(0,0)，綠色正方形設定相對於紅色正方形的位置中，top即為與頂端的距離100px；left為與左側的距離100px。

因此理解後會變成往下及往右各推100px，最後綠色正方形就會推至座標為(100,100)的位置如上圖所示。

總結

以上就是帶大家透過範例及程式碼，快速入門position屬性的應用，最後透過國中數學的座標概念來進一步記憶相對位置的用法，希望無論你是前端還是剛接觸CSS的人，都能快速上手呦！

]]> 876 純 CSS 製作 HTML 頁籤切換 的效果與實例 https:///tab-css-change/ Mon, 15 Feb 2021 00:30:00 +0000 https:///?p=735 頁籤切換 這個功能，在我一開始當前端的時候查了蠻多種資料的，這篇教學製作的成品也是當初從網路東拼西湊再自己改良而來的。
因為當時對Javascript實在很不熟，所以都會想盡可能用純CSS來完成畫面改變。

當然也是可以做到，但如果想搭配撈資料那些跟後端溝通的模式，甚至為了方便維護的話，純CSS未必會是最佳解。

像後來熟悉Javascript後，就會變成CSS搭配Javascript來完成頁籤切換，撰寫的程式碼也比較精簡好閱讀、好維護，CSS也能專注在美化功能就好。

這篇先教大家純CSS能怎麼做到頁籤切換效果，之後有機會再教大家用更便利的Javascript完成頁籤切換吧！

純CSS製作HTML頁籤切換效果

開始看程式碼之前，先看一下完成後的樣式：

頁籤切換 完成樣式
頁籤切換 完成樣式

只要按下上面的頁面1、頁面2等頁籤，就能切換下方顯示的內容。

如下圖就是切換成頁面1時，下方會呈現頁面1的內容。

頁籤切換成頁面1時
頁籤切換成頁面1時

緊接著開始程式碼的撰寫囉，HTML部分：

<!-- HTML -->

<span id="tab-1">主頁</span>
<span id="tab-2">頁面1</span>
<span id="tab-3">頁面2</span>
<span id="tab-4">頁面3</span>

<!-- 頁籤按鈕 -->
<div id="tab">
    <ul>
        <li><a href="#tab-1">主頁</a></li>
        <li><a href="#tab-2">頁面1</a></li>
        <li><a href="#tab-3">頁面2</a></li>
        <li><a href="#tab-4">頁面3</a></li>
    </ul>

    <!-- 頁籤的內容區塊 -->
    <div class="tab-content-1">
        <p>主頁面顯示的內容</p>
    </div>
    <div class="tab-content-2">
      <p>頁面1顯示的內容</p>
    </div>
    <div class="tab-content-3">
      <p>頁面2顯示的內容</p>
    </div>
    <div class="tab-content-4">
      <p>頁面3顯示的內容</p>
    </div>
</div>

CSS的部分：

/* CSS */

#tab {
    width: 400px;
    background: #1caa5d;
    border: solid 1px #1caa5d;
}

/* 頁籤ul */
#tab > ul {
    /* overflow: hidden; */
    margin: 0;
    padding: 10px 20px 0 20px;
}

#tab > ul > li {
    list-style-type: none;
}

/* 頁籤上的文字 */
#tab > ul > li > a { 
    text-decoration: none;
    font-size: 15px;
    color: #333;
    float: left;
    padding: 10px;
    margin-left: 5px;
}

/*頁籤div內容*/
#tab > div {
    clear: both;
    padding: 0 15px;
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

/*第一筆的底色*/
span:target ~ #tab > ul li:first-child a {
    background: #1caa5d;
}

span:target ~ #tab > div:first-of-type {
    visibility: hidden;
    height: 0;
    padding: 0 15px;
}

/*頁籤變換&第一筆*/
span ~ #tab > ul li:first-child a,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"],
#tab-2:target ~ #tab > ul li a[href$="#tab-2"],
#tab-3:target ~ #tab > ul li a[href$="#tab-3"],
#tab-4:target ~ #tab > ul li a[href$="#tab-4"] {
    background: #fff;
    border-radius: 5px 5px 0 0;
}

span ~ #tab > ul li:first-child a::before,
#tab-1:target ~ #tab > ul li a[href$="#tab-1"]::before,
#tab-2:target ~ #tab > ul li a[href$="#tab-2"]::before,
#tab-3:target ~ #tab > ul li a[href$="#tab-3"]::before,
#tab-4:target ~ #tab > ul li a[href$="#tab-4"]::before {
    background-color: white;
    height: 100%;
}

/*頁籤內容顯示&第一筆*/
span ~ #tab > div:first-of-type,
#tab-1:target ~ #tab > div.tab-content-1,
#tab-2:target ~ #tab > div.tab-content-2,
#tab-3:target ~ #tab > div.tab-content-3,
#tab-4:target ~ #tab > div.tab-content-4 {
    visibility: visible;
    height: 200px;
    background: #fff;
}

span {
    display: none;
}

總結

剛開始學習HTML和CSS的時候，面對這種比較稍微複雜的CSS通常也需要一些時間理解，其實後來知道用更便利的Javascript來完成頁籤之後，有些CSS語法就漸漸也沒有再使用了。

因此，我建議適合學習純CSS完成頁籤功能的人有以下兩種：
第一，你是網頁程式設計初學者，能多學任何語法都是進步；
第二，你是一個UI/UX工程師，因為受限於能動的檔案不多，改不到或沒辦法加入Javascript的人，那麼純CSS完成某項功能就會相當實用噢！

]]> 735 純CSS將Radio button美化與開關型整理(下) https:///radio-button-css-change-2/ Tue, 26 Jan 2021 01:00:00 +0000 https:///?p=467 上集我們先介紹了類似電源開關的ON和OFF按鈕基本款程式碼，而看完了基本款的橫向與縱向美化型態，接下來聊聊幾種不同的變化型。

還沒看上集嗎？
直接點選下方網址回顧上集教學吧！
連結：純CSS將Radio button美化與開關型整理(上)

這裡整理了三種不同樣式的變化型，先從單純只有左右和顏色辨別ON和OFF的種類開始，到文字在操作鈕上的版本。
通常我們操作時，使用習慣是操作鈕靠左為OFF；靠右為ON，當然，最好還能透過顏色區分進行識別。

直接來看各版本的最終呈現樣貌及程式碼吧！

Radio button變化型 – 無字大圓版

首先是無字大圓版本，先來看看最終結果會長這樣：

Radio button變化型結果 - 無字大圓版
Radio button變化型結果 – 無字大圓版

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_bigbutton">
    <input type="checkbox" class="cktoggle_bigbutton_checkbox" id="cktoggle_bigbutton_id" checked>

    <label class="cktoggle_bigbutton_label" for="cktoggle_bigbutton_id">
        <span class="cktoggle_bigbutton_inner"></span>
        <span class="cktoggle_bigbutton_circle"></span>
    </label>
</div>

接著是CSS的部分：

/* CSS */

/* ************************
    大圓版本開始
************************ */

.cktoggle_bigbutton {
    position: absolute;
    width: 70px; /* 全按鈕寬度 */
    top: 170px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_bigbutton_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_bigbutton_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    /* border: 2px solid #156812; */
    border-radius: 25px;
}

/* 背景 */
.cktoggle_bigbutton_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_bigbutton_inner:before, .cktoggle_bigbutton_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 22px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_bigbutton_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #7fd293;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_bigbutton_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_bigbutton_circle { 
    display: block;
    width: 26px; /* 小圓寬度 */
    height: 26px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #10b736;
    position: absolute;
    top: -5px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 50px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #2f8442; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: all 0.3s ease-in 0s;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_bigbutton_checkbox:not(:checked) + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle {
    background-color: #ececec;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_bigbutton_checkbox:checked + .cktoggle_bigbutton_label .cktoggle_bigbutton_circle { 
    right: -10px;
}

/* ************************
   大圓版本結束
************************ */

Radio button變化型 – 方形版

再來同樣是左右，但將整個外框製作成圓角方形，並將操作鈕做成類似反光效果。

最終結果會長這樣：

Radio button變化型結果 - 方形版
Radio button變化型結果 – 方形版

程式碼HTML如下：

<！-- HTML -->

<div class="cktoggle_square">
    <input type="checkbox" class="cktoggle_square_checkbox" id="cktoggle_square_id" checked>

    <label class="cktoggle_square_label" for="cktoggle_square_id">
        <span class="cktoggle_square_inner"></span>
        <span class="cktoggle_square_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    方形版本開始
************************ */

.cktoggle_square {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 280px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_square_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_square_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 3px solid #2d54ad;
    border-radius: 8px;
    transition: border 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_square_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_square_inner:before, .cktoggle_square_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 42px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_square_inner:before { 
        content: "ON";
        padding-top: 2px;
        padding-left: 10px;
        background-color: #55a1ff;
        background-image: linear-gradient(to bottom,#398bf1,#88bdff);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_square_inner:after { 
        content: "OFF";
        padding-top: 2px;
        padding-right: 10px;
        background-color: #EEEEEE;
        background-image: linear-gradient(to bottom,#cccccc,#EEEEEE);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_square_circle { 
    display: block;
    overflow: hidden;
    width: 48px; /* 小圓寬度 */
    height: 42px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 66px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 8px;
    transition: all 0.3s ease-in 0s;
}

    /* 上面的小圓深色反光處 */
    .cktoggle_square_circle::after { 
        content: "";
        position: absolute;
        top: 25px;
        left: -15px;
        width: 120px;
        height: 80px;
        background-color: #dedede;
        transform: rotate(-30deg);
    }

/* 當unchecked時，小圓顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label .cktoggle_square_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* 當unchecked時，外框顏色變換 */
.cktoggle_square_checkbox:not(:checked) + .cktoggle_square_label { 
    border-color: #8e8e8e;
}

/* label和背景的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_square_checkbox:checked + .cktoggle_square_label .cktoggle_square_circle { 
    right: 0px;
}

/* ************************
   方形版本結束
************************ */

Radio button變化型 – 文字在上版

文字直接嵌入在操作鈕上，點擊時會切換ON和OFF不同文字。

顯示的結果會長這樣：

Radio button變化型結果 - 文字在上版
Radio button變化型結果 – 文字在上版

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_textTop">
    <input type="checkbox" class="cktoggle_textTop_checkbox" id="cktoggle_textTop_id" checked>

    <label class="cktoggle_textTop_label" for="cktoggle_textTop_id">
        <span class="cktoggle_textTop_inner"></span>
        <span class="cktoggle_textTop_circle"></span>
    </label>
</div>

CSS部分如下：

/* CSS */

/* ************************
    文字在上版本開始
************************ */

.cktoggle_textTop {
    position: absolute;
    width: 320px; /* 全按鈕寬度 */
    top: 410px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_textTop_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_textTop_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border-radius: 50px;
}

/* 背景 */
.cktoggle_textTop_inner { 
    display: block;
    width: 200%; /* 左+右背景總寬度 */
    margin-left: -100%; /* 左側及右側背景位置 一開始躲在左側100% */
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_textTop_inner:before, .cktoggle_textTop_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 28px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_textTop_inner:before { 
        content: "";
        padding-left: 10px;
        background-color: #51c159;
        background-image: linear-gradient(to bottom,#51c159,#80dc7e);
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_textTop_inner:after { 
        content: "";
        padding-right: 10px;
        background-color: #5c9bbf;
        background-image: linear-gradient(to bottom,#5c9bbf,#8cc1ef);
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_textTop_circle { 
    display: block;
    overflow: hidden;
    width: 220px; /* 小圓寬度 */
    height: 22px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background-color: #f5f5f5;
    position: absolute;
    top: 0px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 95px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #c1c1c1; /* 小圓外框顏色 */
    border-radius: 50px;
    text-align: center;
    box-shadow: inset 0px 0px 15px 1px #afa7a7;
    transition: all 0.3s ease-in 0s;
}

    /* 直接在按鈕上增加文字 */
    .cktoggle_textTop_circle::before {
        content: "ON";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

    .cktoggle_textTop_circle::after {
        content: "OFF";
        padding-top: 3px;
        font-family: Trebuchet, Arial, sans-serif;
    }

/* 當切換的時候 上面的字隱藏/出現 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: block;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::before {
    display: none;
}

.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: none;
}

.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle::after {
    display: block;
}

/* 當unchecked時，小圓顏色變換 */
.cktoggle_textTop_checkbox:not(:checked) + .cktoggle_textTop_label .cktoggle_textTop_circle {
    background-color: #f5f5f5;
    border-color: #b7b7b7;
}

/* label和背景的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_textTop_checkbox:checked + .cktoggle_textTop_label .cktoggle_textTop_circle { 
    right: 0px;
}

/* ************************
   文字在上版本結束
************************ */

總結

以上三種視覺上的變化型，讓你可以不再侷限於單一種按鈕樣式。

當然，最好是可以自己修改細節部分，讓你做出來的樣式可以最符合你的系統樣式噢！

希望透過以上的範例，運用純CSS教會大家開關型的Radio button美化與三種變化型囉！

延伸閱讀：
RWD教學-只要兩行就能輕鬆見效的實作經驗

]]> 467 純CSS將Radio button美化與開關型整理(上) https:///radio-button-css-change-1/ Mon, 25 Jan 2021 07:31:20 +0000 https:///?p=436 其實以一般的系統表單而言，普通的Radio button對使用者是最直覺的方式，通常會遇到的困難只有按鈕太小時，手機版會很難按到按鈕的問題，不過這點可以從我的另一篇文章獲得解決方式：
(延伸閱讀：Radio button和Checkbox放大並自訂樣式)

然而較常使用到開關型的地方，應該是在手機版許多的使用者設定頁面會看到，類似電源開關的ON和OFF按鈕。

因此這裡整理了幾種樣式給大家參考，上集先給大家一般基本樣式的程式碼，如果有想知道更多相關的變化型，可以再參考下集的教學噢！

那我們開始用程式碼教大家，用純CSS就能做到開關型Radio button吧！

純CSS製作橫向開關型Radio button

先分析一下，Radio button的開關型，可以分成左右移動的開關和上下移動的開關。

從最常見的型態先看看，最後呈現的結果會長這樣：

Radio button橫向開關型結果
Radio button橫向開關型結果

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle">
    <input type="checkbox" class="cktoggle_checkbox" id="cktoggle_id2" checked>

    <label class="cktoggle_label" for="cktoggle_id2">
        <span class="cktoggle_inner"></span>
        <span class="cktoggle_circle"></span>
    </label>
</div>

接著是CSS程式碼：

/* CSS */

/* ************************
    原始版本開始
************************ */

.cktoggle {
    position: absolute;
    width: 120px; /* 全按鈕寬度 */
    top: 50px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_label { 
    display: block;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_inner { 
    display: block;
    width: 200%;
    margin-left: -100%;
    transition: margin 0.3s ease-in 0s;
}

    /* 背景 */
    .cktoggle_inner:before, .cktoggle_inner:after { 
        display: block;
        float: left;
        width: 50%; /* before和after各佔50% */
        height: 40px; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_inner:before { 
        content: "ON";
        padding-left: 10px;
        background-color: #10b736;
        color: #FFFFFF;
    }

    /* OFF */
    .cktoggle_inner:after { 
        content: "OFF";
        padding-right: 10px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

/* 上面的小圓 */
.cktoggle_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 9px; /* 距離上邊緣 左右是和一開始的位置有關 */
    right: 85px; /* uncheck時 小圓移動到離右側距離XXpx位置 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: right 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_inner { 
    margin-left: 0;
}

/* label和上面小圓的移動 */
.cktoggle_checkbox:checked + .cktoggle_label .cktoggle_circle { 
    right: 10px;
}

/* ************************
    原始版本結束
************************ */

純CSS製作縱向開關型Radio button

接下來，運用前一個橫向例子中相同的視覺樣式，只是從橫向變為縱向的程式寫法，最後呈現結果長這樣：

Radio button縱向開關型結果
Radio button縱向開關型結果

程式碼HTML如下：

<!-- HTML -->

<div class="cktoggle_vertical">
    <input type="checkbox" class="cktoggle_vertical_checkbox" id="cktoggle_vertical_id" checked>

    <label class="cktoggle_vertical_label" for="cktoggle_vertical_id">
        <span class="cktoggle_vertical_inner"></span>
        <span class="cktoggle_vertical_circle"></span>
    </label>
</div>

接著是CSS部分：

/* CSS */

/* ************************
    垂直版本開始
************************ */


.cktoggle_vertical {
    position: absolute;
    width: 40px; /* 全按鈕寬度 */
    top: 520px;
    left: 50px;
}

/* 原按鈕樣式隱藏 */
.cktoggle_vertical_checkbox { 
    display: none;
}

/* 主外框 */
.cktoggle_vertical_label { 
    display: block;
    overflow: hidden;
    width: 40px;
    height: 100px;
    cursor: pointer;
    border: 2px solid #156812;
    border-radius: 25px;
}

/* 背景 */
.cktoggle_vertical_inner { 
    display: block;
    height: 200%;
    margin-top: -100px;
    transition: margin 0.3s ease-in 0s;
}

/* 背景 */
.cktoggle_vertical_inner:before, .cktoggle_vertical_inner:after { 

        display: block;
        float: left;
        width: 100%; /* before和after各佔100% 多的部分float left 所以OFF在下方 */
        height: 50%; /* 全按鈕高度 */
        line-height: 42px; /* ON OFF文字高度 */
        font-size: 16px;
        color: white;
        font-family: Trebuchet, Arial, sans-serif;
        font-weight: bold;
        box-sizing: border-box;
    }

    /* ON */
    .cktoggle_vertical_inner:before { 
        content: "OFF";
        padding-right: 3px;
        background-color: #EEEEEE;
        color: #999999;
        text-align: right;
    }

    /* OFF */
    .cktoggle_vertical_inner:after { 
        content: "ON";
        padding-left: 8px;
        padding-top: 60px;
        background-color: #10b736;
        color: #FFFFFF;
    }

/* 上面的小圓 */
.cktoggle_vertical_circle { 
    display: block;
    width: 20px; /* 小圓寬度 */
    height: 20px; /* 小圓高度 */
    margin: 0px; /* 小圓距離上下左右margin */
    background: white;
    position: absolute;
    top: 8px; /* unchecked時位置 */
    right: 5px; /* 小圓離右側距離 */
    border: 3px solid #1b9b39; /* 小圓外框顏色 */
    border-radius: 100px;
    transition: top 0.3s ease-in 0s;
}

/* label和背景的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_inner { 
    margin-top: 0;
}

/* label和上面小圓的移動 */
.cktoggle_vertical_checkbox:checked + .cktoggle_vertical_label .cktoggle_vertical_circle { 
    top: 70px;
}

/* ************************
    垂直版本結束
************************ */

總結

如果是做系統的人，開關型按鈕可以讓使用者看到一整排需要操作的設定，比起單純看到兩顆Radio button來說，更直覺且質感提升不少，是個推薦的呈現方式噢！

把基本的橫向與縱向開關型按鈕看懂之後，我們再來進行下集的變化型。

變化型指的其實是樣式不同而已，相信如果橫向與縱向的程式能夠看懂並且懂得如何修改這些程式碼的話，我想下集的變化型肯定難不倒你的！

前往下集連結：
純CSS將Radio button美化與開關型整理(下)

]]> 436 RWD教學-只要兩行就能輕鬆見效的實作經驗 https:///rwd-two-line/ Mon, 18 Jan 2021 14:49:06 +0000 https:///?p=227 大家聽到RWD(Responsive Web Design)響應式網頁設計時，沒接觸過的人會覺得聽起來好像很難，尤其看到像是職訓或專門寫程式的人開教學或講座，一堂課動輒上千塊，非工程師背景的人即使有錢有閒買下課程，也會害怕學不會。

但其實實務上只需要用到CSS和HTML各一行，基本上可以同時適應電腦版和手機版的RWD網頁就能完成了。

不過不得不說，確實會一點CSS比較知道這兩行代表的意義以及實用性，但就算什麼都不懂，我也會舉例給你，相信經過這篇文章，未來你只要再去學習HTML和CSS，你就同時學會RWD了！

CSS的RWD做法

我們先看程式碼，這行要寫在CSS的檔案中：

@media screen and (max-device-width: 768px){
  /* CSS內容 */
}

這行的意思是，當系統偵測到裝置寬度低於768px時，就自動執行大括弧中的CSS內容。

於是通常會寫一種電腦版，配上一個RWD版本，如下：

/* 電腦版 */
body{
  background:red;
}

/* 行動裝置版 */
@media screen and (max-device-width: 768px){
  body{
    background:green;
  }
}

這樣一來，根據CSS相同項目設定會由後方設定覆蓋過前方設定的原則，當行動裝置寬度低於768px時，背景就會變成綠色的了。

歡迎大家透過F12網頁的開發人員工具進行測試！

F12網頁的開發人員工具

這裡簡單提一下F12開發人員工具，如下圖的截圖中，你在網頁按下F12之後會出現截圖中的畫面，上面那個區塊是HTML的部分；
下面那個區塊是當你點選上方HTML標籤後，該標籤的CSS設定。

Google Chrome F12畫面說明
Google Chrome F12畫面說明

接著，F12點選下圖紅色框起的按鈕，就可以看見你剛剛設定的手機版本樣式囉！

點選紅色框起處的按鈕進入 RWD 手機版測試
點選紅色框起處的按鈕進入 RWD 手機版測試

由於把網頁瀏覽器寬度直接縮放，跟裝置縮放是兩回事，因此若還想要達到網頁瀏覽器寬度縮放的效果，要把@media那行括號中的device拿掉，再根據你的測試抓適當的視窗寬度，範例如下：

/* 原本括弧中的內容是max-device-width */
@media screen and (max-width: 1000px){
 
  body{
    background:green;
  }
}

HTML的RWD做法

再來就是因為HTML要加入的內容，這可以避免你一個區塊一個區塊手動把文字內容放大，加入這行就可以讓裝置偵測你是網頁但用手機裝置顯示而自動調整：

<!-- 加在HTML的<head>標籤中 -->
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, user-scalable=1">

實務上有時候畫面比較寬資料量大時，會設initial-scale=0.6和minimum-scale=0.6，當然這是依據需求所做的調整。

但基本上只要加入了這行，再也不用擔心網頁的文字放在手機會小到完全看不到的困境，對超級新手前端是非常大的解藥！！

(延伸閱讀：Radio button和Checkbox放大並自訂樣式)

想當年我差一點點就要全部手動修改字體了…
還好在剛開始改的時候就多思考了幾秒突然覺得不太對，這麼先進的技術怎麼可能手機版要一個一個改CSS，才讓我查到這行拯救我前端人生的程式碼(淚~

結論

學完這兩行對於RWD響應式設計重要的程式碼後，是不是覺得RWD網頁設計其實也沒這麼難呢？

雖然無論是HTML、CSS學習的過程還是充滿許多眉角，但要是能先透過這兩行程式碼帶你速成一個RWD網頁，我想必定能夠讓你在寫網頁的路上增加很大的成就感！

延伸閱讀：
純CSS將Radio button美化與開關型整理(上)

]]> 227 Radio button和Checkbox放大並自訂樣式 https:///radio-button-and-checkbox-customize/ Thu, 14 Jan 2021 11:24:49 +0000 https:///?p=102 Radio button和Checkbox在電腦版雖然很小，沒特別注意的話也不會感覺到特別難按；
但如果你也在煩惱為了RWD(Responsive Web Design響應式設計)，而不得不把按鈕透過CSS的方式讓它看起來至少變大顆，這裡就用程式碼直接讓你學會，不只讓你能將按鈕變大顆，也能教你把按鈕透過CSS自訂成想要的樣式噢！
(延伸閱讀：RWD教學-只要兩行就能輕鬆見效的實作經驗)

Radio button和Checkbox預設樣式

原本樣式
原本樣式

對沒錯，上面這個圖片就是最原始的樣式，按鈕小到連游標要點其實都有點小困難，雖然說大部分在應用上會搭配文字，只要透過label標籤的for屬性連結input標籤的id屬性，這時點擊文字就能完成選擇了！

但通常系統做出來第一件事都會要求直接放大按鈕大小就好，
那我們先看一下Html原始碼：

<!-- HTML -->

<body>
    <!-- 這是圓型按鈕測試 -->
    <p>CheckBox</p>
    <div class="ckbutton">
        <input type="checkbox" class="ckbutton_checkbox" id="ckbutton_id" checked>
        <label class="ckbutton_label" for="ckbutton_id"></label>

        <input type="checkbox" class="ckbutton_checkbox" id="ckbutton_id2">
        <label class="ckbutton_label" for="ckbutton_id2"></label>

    </div>
    <br />
    <p>RadioButton</p>
    <!-- radio測試 -->
    <!-- id連結該input name相同表示同一群組 value為按鈕的值 -->
    <div class="rdobutton">
        <input class="rdobutton_radio" type="radio" id="radioId" name="radioname" value="0" checked />
        <label class="rdobutton_label" for="radioId"></label>

        <input class="rdobutton_radio" type="radio" id="radioId2" name="radioname" value="1" />
        <label class="rdobutton_label" for="radioId2"></label>
    </div>


</body>

以上是Radio button和Checkbox在HTML部分的設定，接下來我們來準備加入CSS樣式設定吧！

單純放大按鈕寬高

想要單純放大的話，只需要在CSS中兩個按鈕的class給上寬高即可：

/* CSS */

.ckbutton_checkbox, .rdobutton_radio{
  width: 25px;
  height: 25px;
}

這時候我們就可以看到，按鈕確實變大顆了，不再是預設那種小到很難按的按鈕了！

設定寬高後放大版
設定寬高後放大版

自訂Radio button和Checkbox按鈕樣式

這時候如果還想要自訂一下不同的樣式，我們使用的是::before 和 ::after的方式來放checkbox裡面那個勾勾，::before為勾勾的左邊短邊；::after為勾勾的右邊長邊，

為了跟前面有所區別，我們把按鈕改綠色，並且垂直排列，那就話不多說直接上程式碼：

/* CSS */

/* *********************
    自製checkbox開始
********************* */
.ckbutton_label { /* 主外框 */
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid #01790d;
    border-radius: 5px;
    -moz-transition: background-color 0.2s ease-in;
    -webkit-transition: background-color 0.2s ease-in;
    -o-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}

    .ckbutton_label::before, .ckbutton_label::after { /* 上面的打勾 */
        content: "";
        position: absolute;
        width: 5px;
        background-color: white;
        -moz-transition: opacity 0.2s ease-in;
        -webkit-transition: opacity 0.2s ease-in;
        -o-transition: opacity 0.2s ease-in;
        transition: opacity 0.2s ease-in;
        opacity: 0;
    }

    .ckbutton_label::before { /* 打勾左邊的線 */
        height: 11px;
        top: 13px;
        left: 7px;
        -moz-transform: rotate(-45deg);
        -webkit-transform: rotate(-45deg);
        -o-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }

    .ckbutton_label::after { /* 打勾右邊的線 */
        height: 16px;
        top: 6px;
        left: 16px;
        -moz-transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
        -o-transform: rotate(45deg);
        -ms-transform: rotate(45deg);
        transform: rotate(45deg);
    }

.ckbutton_checkbox:checked + .ckbutton_label { /* 當check時 按鈕顏色改變 */
    background-color: #10bd2a;
}

    .ckbutton_checkbox:checked + .ckbutton_label::before,
    .ckbutton_checkbox:checked + .ckbutton_label::after { /* 當check時 打勾消失 */
        opacity: 1;
    }

.ckbutton_checkbox {
    display: none;
}

/* *********************
    自製checkbox結束
********************* */

/* *********************
    自製radiobox開始
********************* */

.rdobutton_label { /* 主外框 */
    position: relative;
    display: block;
    width: 30px;
    height: 30px;
    cursor: pointer;
    border: 2px solid #01790d;
    border-radius: 25px;
    -moz-transition: background-color 0.2s ease-in;
    -webkit-transition: background-color 0.2s ease-in;
    -o-transition: background-color 0.2s ease-in;
    transition: background-color 0.2s ease-in;
}

    .rdobutton_label::before {
        content: "";
        position: absolute;
        top: 7px;
        left: 7px;
        width: 16px;
        height: 16px;
        background-color: white;
        border-radius: 25px;
        opacity: 0;
        -moz-transition: opacity 0.2s ease-in;
        -webkit-transition: opacity 0.2s ease-in;
        -o-transition: opacity 0.2s ease-in;
        transition: opacity 0.2s ease-in;
    }

input:checked + .rdobutton_label { /* 當check時 按鈕顏色改變 */
    background-color: #10bd2a;
}

.rdobutton_radio:checked + .rdobutton_label::before { /* 當check時 打勾消失 */
    opacity: 1;
}

.rdobutton_radio {
    display: none;
}

/* *********************
    自製radio結束
********************* */

透過自訂樣式，我們將Radio button和Checkbox的內容物都改成我們自己CSS產生的內容，這樣一來，自由度就提高非常多了，想要做成各種不同形狀都可以了！

而上面範例完成的樣子會顯示成下面這樣：

自訂樣式
自訂樣式

結論

這個小技巧是我在進職場時接觸的第一件事情，就是請我想辦法把按鈕變大顆，好讓公司產品系統可以好按一點，只是在按鈕放大後，就會開始請我把按鈕變成不同顏色、不同樣式，這時候就需要自訂CSS來讓按鈕產生不同的效果。

會選擇透過 ::before 和 ::after 的方式來讓我有很高的自由度可以修改成想要的模樣，原因是可以不用增加HTML標籤就能完成Checkbox那種勾勾，在實務上也是比較常見的作法，因為有時候配合的後端工程師可能是PHP或C#或ASP.NET你不知道，但如果能單靠CSS樣式檔就把內容改成對方想要的樣子，除了不用請對方加東加西以外，他們對你的能力也會更有信心噢！

]]> 102