diff options
Merge pull request #7 from picturepan2/hotifx/radio-checkbox-input
Hotifx/radio checkbox input
1 files changed, 19 insertions, 13 deletions
| -rw-r--r-- | index.html | 32 |
@@ -514,10 +514,12 @@ <div class="form-group"> <label class="form-label">Gender</label> <label class="form-radio"> - <input type="radio" name="gender" /> Male + <input type="radio" name="gender" /> + <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" checked /> Female + <input type="radio" name="gender" checked /> + <i class="form-icon"></i> Female </label> </div> <div class="form-group"> @@ -531,7 +533,7 @@ <div class="form-group"> <label class="form-switch"> <input type="checkbox" /> - Send me emails with news and tips + <i class="form-icon"></i> Send me emails with news and tips </label> </div> <div class="form-group"> @@ -541,7 +543,7 @@ <div class="form-group"> <label class="form-checkbox"> <input type="checkbox" /> - Remember me + <i class="form-icon"></i> Remember me </label> </div> <div class="form-group"> @@ -568,10 +570,12 @@ <label class="form-label col-3">Gender</label> <div class="col-9"> <label class="form-radio"> - <input type="radio" name="gender" /> Male + <input type="radio" name="gender" /> + <i class="form-icon"></i> Male </label> <label class="form-radio"> - <input type="radio" name="gender" checked /> Female + <input type="radio" name="gender" checked /> + <i class="form-icon"></i> Female </label> </div> </div> @@ -591,7 +595,7 @@ <div class="col-9"> <label class="form-switch"> <input type="checkbox" /> - Send me emails with news and tips + <i class="form-icon"></i> Send me emails with news and tips </label> </div> </div> @@ -606,7 +610,7 @@ <div class="col-9"> <label class="form-checkbox"> <input type="checkbox" /> - Remember me + <i class="form-icon"></i> Remember me </label> </div> </div> @@ -633,10 +637,12 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-label"</span>>Gender<<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> Male + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> /> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Male <<span class="tag">/label</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-radio"</span>> - <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> Female + <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"radio"</span> <span class="atn">name</span>=<span class="atv">"gender"</span> <span class="atn">checked</span> /> + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Female <<span class="tag">/label</span>> <<span class="tag">/div</span>> <span class="com"><!-- form select control --></span> @@ -652,7 +658,7 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-switch"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> - Send me emails with news and tips + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Send me emails with news and tips <<span class="tag">/label</span>> <<span class="tag">/div</span>> <span class="com"><!-- form textarea control --></span> @@ -664,7 +670,7 @@ <<span class="tag">div</span> <span class="atn">class</span>=<span class="atv">"form-group"</span>> <<span class="tag">label</span> <span class="atn">class</span>=<span class="atv">"form-checkbox"</span>> <<span class="tag">input</span> <span class="atn">type</span>=<span class="atv">"checkbox"</span> /> - Remember me + <<span class="tag">i</span> <span class="atn">class</span>=<span class="atv">"form-icon"</span>><<span class="tag">/i</span>> Remember me <<span class="tag">/label</span>> <<span class="tag">/div</span>> <<span class="tag">/form</span>> @@ -1899,7 +1905,7 @@ <footer class="bg-grey"> <section id="copyright" class="grid-footer grid-960"> <p> - <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.6 + <a href="https://github.com/picturepan2/spectre" target="_blank">GitHub Repo</a> | <a href="#">Back to top</a> | version: 0.1.7 </p> <p>Designed and built with love by <a href="https://twitter.com/picturepan2" target="_blank">Yan Zhu</a>. Licensed under the <a href="https://github.com/picturepan2/spectre/blob/master/LICENSE" target="_blank">MIT License</a>.</p> </section> |