資訊專欄INFORMATION COLUMN
摘要：之前分析了一個原生的，趁熱打鐵分析的自帶定義了一個父節點。此元素會被顯示為內聯元素，元素前后沒有換行符。子節點讓元素的子節點像元素一樣。綜上，只是給了一個邊框的效果。子節點這個就是那個后顯示的對號。
之前分析了一個原生的checkbox，趁熱打鐵分析ionic的自帶checkbox.
html css- checkbox
.checkbox {
position: relative;
display: inline-block;
padding: 7px 7px;
cursor: pointer; }
定義了一個父節點。
display: inline-block;此元素會被顯示為內聯元素，元素前后沒有換行符。
- checkbox子節點input:before
.checkbox input:before{
display: table;
width: 100%;
height: 100%;
border-color: #ffffd;
border-width: 1px;
border-style: solid;
border-radius: 28px;
background: #fff;
content: " ";
-webkit-transition: background-color 20ms ease-in-out;
transition: background-color 20ms ease-in-out; }
display:table;讓元素的子節點像table元素一樣。
使用基于表格的CSS布局，使我們能夠輕松定義一個單元格的邊界、背景等樣式，而不會產生因為使用了table那樣的制表標簽所導致的語義化問題。
width: 100%;height: 100%;高度寬度。
border-color: #ffffd;border-width: 1px;border-style: solid;border-radius: 28px;
定義一個圓形的邊框，淺灰色。
transition: background-color 20ms ease-in-out;這是一個CSS3過渡效果。即背景顏色有2ms的過度。
綜上，input:before只是給了一個邊框的效果。
- checkbox子節點input:after
.checkbox input:after{
-webkit-transition: opacity 0.05s ease-in-out;
transition: opacity 0.05s ease-in-out;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
position: absolute;
top: 33%;
left: 25%;
display: table;
width: 14px;
height: 6px;
border: 1px solid #fff;
border-top: 0;
border-right: 0;
content: " ";
opacity: 0; }
這個就是那個checked后顯示的對號。
transition: opacity 0.05s ease-in-out;表示一個透明度的漸變。
ease-in-out:
ease 規定慢速開始，然后變快，然后慢速結束的過渡效果;
ease-in 規定以慢速開始的過渡效果;
ease-out 規定以慢速結束的過渡效果;
ease-in-out 規定以慢速開始和結束的過渡效果
transform: rotate(-45deg);旋轉45度。
后面的其實就在弄出“對號”
checkbox子元素Input:checked:before
.checkbox input:checked:before {
background: #387ef5;
border-color: #387ef5;
border-width: 2px;
}
當checked時，Input:before的背景顏色和邊框顏色都是藍色。
checkbox子元素Input:checked:after
.checkbox input:checked:after{
opacity: 1;
}
當checked時，input:after透明度為0(顯示那個“對號”).
結論綜上所述，
input:before是一個邊框效果
input:after是一個“對號”效果
當checked時，input:after（對號）顯示，input:before（原來的灰色邊框）的背景和邊框都變為藍色。
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。
轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/115031.html
摘要：之前分析了一個原生的，趁熱打鐵分析的自帶定義了一個父節點。此元素會被顯示為內聯元素，元素前后沒有換行符。子節點讓元素的子節點像元素一樣。綜上，只是給了一個邊框的效果。子節點這個就是那個后顯示的對號。 之前分析了一個原生的checkbox，趁熱打鐵分析ionic的自帶checkbox. html check showImg(https://segmentfault.com/img...
摘要：抽時間寫了個，你想要的都在這里了。你可以狠狠的點擊下面的鏈接去往倉庫地址，一探究竟。你可以直接下來，直接運行。 ionic2實現透明狀態欄和透明工具欄 目錄 如何實現？ 集成DEMO（2017/4/1更新） 簡短的分析 一個額外的小栗子 我想讓狀態欄變色怎么辦？ 為什么這么做？ 總結 以下是我的方案，不繞彎子，直接上實現過程．首先貼效果圖，來張gif（2017/4/1更新）show...
摘要：項目打包運行命令的時候報錯報錯詳情如下解決辦法已經執行過命令添加了平臺，直接打開目錄你的項目工程文件中找到方法在這個方法之前添加上如下內容原因分析帶號是指要用最新版本。 ionic項目打包運行命令 ionic build android的時候報錯 報錯詳情如下 :processDebugResourcesERROR: In FontFamilyFont, unable to find...
閱讀 1684·2021-09-26 09:55
閱讀 3713·2021-09-22 15:31
閱讀 7328·2021-09-22 15:12
閱讀 2209·2021-09-22 10:02
閱讀 4624·2021-09-04 16:40
閱讀 1031·2019-08-30 15:55
閱讀 3018·2019-08-30 12:56
閱讀 1813·2019-08-30 12:44
