radio美化程式碼例項
radio單選按鈕預設狀態下並不美觀,但是我們可以通過其他途徑將其美化。
程式碼例項如下:
[HTML] 純文字檢視 複製程式碼<!DOCTYPE html> <html> <head> <meta charset=" utf-8"> <meta name="author" content="http://www.softwhy.com/" /> <title>螞蟻部落</title> <style> .box{ width:24px; height:18px; float:left; padding-top:3px; cursor:pointer; text-align:center; margin-right:10px; background-image:url(demo/CSS/img/inputradio.gif); background-repeat:no-repeat; background-position:-24px 0; } .antzone{ opacity: 0; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter: alpha(opacity=0); } .on{ background-position: 0 0; } </style> </head> <body> <span class="box on"> <input type="radio" checked="checked" class="antzone"> </span> </body> </html>
上面的程式碼實現了美化效果,原理也很簡單,下面做一下簡單介紹。
無非就是讓瀏覽者看到的是一個背景圖片而不是真正的單選按鈕(單選按鈕設定為透明狀態)。
背景圖片如下:
通過設定背景圖片的位置,來模擬實現單選按鈕的選中和非選中狀態。
background-position可以參閱CSS background-position一章節。
相關文章
- table表格美化程式碼例項
- input range美化程式碼例項
- <input type="file">美化例項程式碼
- 美化滾動條效果程式碼例項
- <input type="file">美化效果程式碼例項
- 表單提示美化效果程式碼例項
- select下拉選單美化程式碼例項
- checkbox核取方塊美化程式碼例項
- jQuery美化select下拉選單程式碼例項jQuery
- 美化<input type="range">控制元件程式碼例項控制元件
- 模擬美化select下拉選單程式碼例項
- 模擬美化checkbox核取方塊程式碼例項
- css3實現button按鈕美化效果程式碼例項CSSS3
- js獲取選中radio單選按鈕的值程式碼例項JS
- css3實現的checkbox核取方塊美化程式碼例項CSSS3
- jQuery is() 程式碼例項jQuery
- radio單選按鈕美化效果
- jQuery選項卡例項程式碼jQuery
- dom操作程式碼例項
- javascript的for in例項程式碼JavaScript
- drag拖拽程式碼例項
- requestAnimationFrame()動畫例項程式碼requestAnimationFrame動畫
- $$和||使用程式碼例項
- js刮刮樂程式碼例項JS
- canvas刮刮樂程式碼例項Canvas
- css梯形程式碼例項CSS
- toJSON()程式碼例項JSON
- [轉]BDB例項程式碼
- IOS程式碼例項區iOS
- js監聽鍵盤事件程式碼例項例項JS事件
- 用Prettier美化程式碼
- 用 Prettier 美化程式碼
- css3單選框、核取方塊和開關按鈕美化效果程式碼例項CSSS3
- JavaScript in運算子程式碼例項JavaScript
- 設計模式例項程式碼設計模式
- js使用XMLHttpRequest例項程式碼JSXMLHTTP
- jQuery操作cookie程式碼例項jQueryCookie
- jQuery 動畫效果程式碼例項jQuery動畫