当前位置: 首页>C语言>正文

html自定義單選按鈕,美化表單——自定義單選按鈕和復選按鈕

html自定義單選按鈕,美化表單——自定義單選按鈕和復選按鈕

大家都知道,在Web的Form中美化是最頭痛的,尤其是表單中的“input[type=checkbox]”、“input[type="radio"]”、“input[type=file]”和select這些元素我們單單只使用CSS是無法匹配設計圖的,像背景顏色或者背景圖片,甚至說margin和padding等等在各瀏覽器下都沒法實現一致的效果,具體大家可以看看這里所展示的頁面效果。為了解決這樣的問題,我們只有另選其他的途徑。使用CSS和js配合,使用他們實現各瀏覽器的統一樣式。

前面我在本站也介紹了這方面的知識點,比如說《自定義表單——美化你的文件載入框》中介紹了如何通過js和css來美化表單中的文件載入框(input[type=file]),在《自定義表單——jQuery制作個性化Checkbox》中介紹了如何通過jQuery和CSS3來美化復選按鈕的效果。那么今天我想和大家一起在學習另外一個有關于表單元素的美化知識——自定義單選按鈕和復選按鈕。就如下面DEMO展示的效果一樣:

781197881a516901426c8b16074421a9.png

一、準備工作

上面DEMO展示的單選和復選按鈕是不是很靚呀,為了達到上面的那種DEMO效果,我們需要準備兩張背景圖片:

03a6128e290ded09e1cfac8142f5c034.png

這兩張圖就是我們所需要制作的“單選按鈕”和“復選按鈕”的效果圖,我們后期將會使用“sprites”技術,將其當作背景應用到我們表單中,從而實現表單的美化效果。

二、HTML Markup

我們先按照下面的幾個條件創建一個基本的表單:

給每個ipnut定義一個唯一的ID名稱;

給每個input匹配一個label標簽;

匹配好每個label中的“for”屬性,其中“for”值對應其匹配的“input”的“ID”名;

對于單選按鈕,如果其是一組的,我們還需要給他們定義一個相同的“name”名。

根據上面的要求,寫了一個簡單的HTML Markup

Which genres do you like?

Action / Adventure

https://www.zydui.com/afb8bUG8CDQ9TBFAH.html
>

相关文章:

  • 詳解PyTorch中的contiguous
  • PyTorch中的contiguous解讀
  • Pytorch中contiguous()函數理解
  • ios自定義UITabBar-仿寫掌上英雄聯盟的UITabBar
  • 基于Cocos2d-x的英雄聯盟皮膚選擇菜單
  • lol-登陸英雄聯盟出錯
  • JS中雙層for循環執行順序
  • 關于for循環執行順序
  • 上古卷軸5boss計算機丟失,上古卷軸5常見BUG解決辦法
  • 上古世紀服務器維護真情禮,4月9日例行維護懷舊服合服公告
  • 塔羅牌張數
  • 工程管理中的工程技術
  • 銳派出品:LOL新年特輯S4各類細節之下路篇
  • 藍城兄弟Q4業績背后,垂直社區具備多少想象力?
  • Mac OS啟動服務優化高級篇(launchd tuning)
  • #Geek Point# 為什么現在要去印度看一看?
  • vm 流程運行mac os_什么是“商務”流程,為什么在我的Mac上運行?
  • # 陌生人社交產品:需求、困境與破局之道
  • mac 不受信任在哪里更改_什么是受信任的,為什么它可以在Mac上運行?
  • 車行軌跡分類實踐
  • 智慧車行預約小程序 v9.1
  • i12藍牙耳機充電倉怎么看充滿電_車行藍牙耳機價格高性價比的選擇
  • 車行平安
  • 論文閱讀——《基于卷積神經網絡的車行環境多類障礙物檢測與識別》
  • 飛槳開發者創意薈:PaddleHub一鍵部署,AI創意實現原來如此簡單
  • eclipse左側欄目即包資源管理器怎么打開
  • 卷毛機器人符文_卷毛S6娜美輔助天賦 娜美輔助符文天賦S6最新
  • 天賦介紹
  • 蘋果怎么沒有4g信號還無服務器,不顯示4g信號怎么回事?蘋果手機不顯示4g信號的解決方法...
  • c4D體積生成和Quad Remesher重新拓撲減面插件