表單美化

来源:http://www.cnblogs.com/xiaohuochai/archive/2016/02/06/5183699.html
-Advertisement-
Play Games

[1]單選按鈕 [2]多選按鈕 [3]下拉列表


目錄
[1]單選按鈕 [2]多選按鈕 [3]下拉列表

前面的話

  由於一些系統原生的表單控制項在各個瀏覽器中顯示效果不一致,且無法設置某些關鍵CSS樣式,為了保證表單在各瀏覽器中的相容性,表單美化就是不得不做的一件事了

 

單選按鈕

【實現效果】

【實現過程】

body{
    margin: 0;
    font: 16px/20px "宋體";
}
.box{
    width: 500px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    border: 1px solid black;
    text-align: center;
}
.box label{
    position:relative;
    padding-left: 20px;
}
.box input{
    visibility: hidden;
}    
.box i{
    position: absolute;
    top: -2px;
    left: -2px;
    height: 19px;
    width: 19px;
    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/radiobutton.gif') no-repeat -14px -18px;
}
.box label:hover{
    color: red;
}
.box label:hover i{
    background-position: -14px -118px;
}
.box label.selected i{
    background-position: -14px -218px;
}
<div class="box" id="box">
    選擇一項游戲方式:
    <label for="xiu"><i></i>咻一咻</label>
    <input id="xiu" type="radio" value="咻一咻">
    <label for="yao"><i></i>搖一搖</label>
    <input id="yao" type="radio" value="搖一搖">
    <label for="niu"><i></i>扭一扭</label>
    <input id="niu" type="radio" value="扭一扭">
</div>
<script>
var oBox = document.getElementById('box');
var aLabel = oBox.getElementsByTagName('label');
for(var i = 0, leni = aLabel.length; i < leni; i++){
    aLabel[i].onclick = function(){
        for(var j = 0,lenj = aLabel.length; j < lenj; j++){
            aLabel[j].removeAttribute('class');
        }
        this.className = 'selected';
    }
}
</script>

 

多選按鈕

【實現效果】

【實現過程】

body{
    margin: 0;
    font: 16px/20px "宋體";
}
.box{
    width: 600px;
    height: 100px;
    line-height: 100px;
    margin: 0 auto;
    border: 1px solid black;
    text-align: center;
}
.box label{
    position:relative;
    padding-left: 20px;
}
.box input{
    visibility: hidden;
}    
.box i{
    position: absolute;
    top: -2px;
    left: -2px;
    height: 19px;
    width: 19px;
    background: url('http://sandbox.runjs.cn/uploads/rs/26/ddzmgynp/checkbox.gif') no-repeat -14px -18px;
}
.box label:hover{
    color: red;
}
.box label:hover i{
    background-position: -14px -118px;
}
.box label.selected i{
    background-position: -14px -218px;
}
<div class="box" id="box">
    選擇日常手機交易方式(可多選):
    <label for="a"><i></i>支付寶</label>
    <input id="a" type="radio" value="支付寶">
    <label for="t"><i></i>微信</label>
    <input id="t" type="radio" value="微信">
    <label for="b"><i></i>百度錢包</label>
    <input id="b" type="radio" value="百度錢包">
</div>
<script>
var oBox = document.getElementById('box');
var aLabel = oBox.getElementsByTagName('label');
for(var i = 0, leni = aLabel.length; i < leni; i++){
    aLabel[i].onclick = function(){
        if(!this.className){
            this.className = 'selected';
        }else{
            this.removeAttribute('class');
        }
    }
}
</script>

 

下拉列表

【實現效果】

【實現過程】

body{
    margin: 0;
    font: 16px/20px "宋體";
}
ul{
    margin: 0;
    padding: 0;
    list-style: none;
}
.box{
    width: 300px;
    height: 40px;
    margin: 0 auto;
    border: 1px solid black;
}
.box .show{
    background-color: red;
    line-height: 30px;
    padding: 5px;
}
.box .show-area{
    color: white;
    vertical-align: middle;
}
.box .show-select{
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 200px;
    height: 28px;
    border: 1px solid #999;
    background-color: white;
    text-indent: 20px;
    cursor: pointer;
}
.box .show-selectAdd{
    color: #999;
}
.box .show-select i{
    position: absolute;
    height: 0;
    width: 0;
    top: 0;
    right: 0;
    margin-top: 12px;
    margin-right: 5px;
    border: 5px solid transparent;
    border-top-color: black;
}
.box .show-selectAdd i{
    border: 5px solid transparent;
    border-bottom-color: black;
    margin-top: 8px;
}
.box .list{
    border: 1px solid #dfdfdf;
    border-top: none;
    display: none;
}
.box .list-in{
    height: 30px;
    line-height: 30px;
    text-indent: 74px;
    border-bottom: 1px solid #dfdfdf;    
    cursor: pointer;
}
.box .list-in:hover{
    color: red;
}
<div class="box" id="box">
    <div class="show">
        <strong class="show-area">地址:</strong>
        <span class="show-select">朝陽區<i></i></span>
    </div>
    <ul class="list">
        <li class="list-in">朝陽區</li>
        <li class="list-in">海澱區</li>
        <li class="list-in">東城區</li>
        <li class="list-in">西城區</li>
        <li class="list-in">丰台區</li>
        <li class="list-in">石景山區</li>
    </ul>
</div>
<script>
var oBox = document.getElementById('box');
var oDiv = oBox.getElementsByTagName('div')[0];
var oShow = oDiv.getElementsByTagName('span')[0];
var oUl = oBox.getElementsByTagName('ul')[0];
var aLi = oUl.getElementsByTagName('li');
//簡單思路
//[1]點擊oDiv時,預設文字為黑色,三角向上,變成文字為#999,三角向下;簡化為增加一個show-selectAdd類名;oUl從隱藏變成顯示
oDiv.onclick = function(e){
    //阻止冒泡
    e = e || event;
    if(e.stopPropagation){
        e.stopPropagation();
    }else{
        e.cancelBubble = true;
    }
    oShow.className = 'show-select show-selectAdd';
    oUl.style.display = 'block';
}
//[2]點擊oUl的li時,oUl從隱藏變成顯示,文字和三角恢復到黑色和向上的預設樣式;並且文字內容變成當前點擊的li的內容
for(var i = 0,len=aLi.length; i < len;i++){
    aLi[i].onclick = function(){
        oShow.innerHTML = this.innerHTML + '<i></i>';
    }
}
//[3]點擊box以外的其他部分時,oUl從隱藏變成顯示,文字和三角恢復到黑色和向上的預設樣式
document.onclick = function(){
    this.getElementsByTagName('span')[0].className = 'show-select';
    oUl.style.display = 'none';    
}
</script>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 今天來看看關於數組方面的一些小問題,可能對你會有一些小小的幫助,當然如果我有說錯的地方也歡迎指教,畢竟我也是一個菜鳥。 1. 1 // var arr = [1,2,3]; 2 // arr["bbb"]="nor 1"; 3 // arr[-2]="nor 2"; 4 // console.log
  • 在AngularJS的實際項目中,經常需要處理多個$http請求,每個$http請求返回一個promise,我們可以把多個promise放到$q.all()方法接受的一個數組實參中去。■ 處理多個$http請求 angular.module('app',[]) .controller('AppCtr
  • URL屬性的定義和用法:此屬性可返回當前文檔的URL。說明:該屬性的值與包含文檔的Window的location.href屬性相同,但是在URL重定向發生的時候,這個URL屬性保存了文檔的實際URL,而 location.href保存了請求的URL。語法結構: document.URL 瀏覽器支持:
  • charAt()函數用法實例代碼:本章節簡單介紹一下charAt()函數的用法,希望能夠給需要的朋友帶來幫助。此函數可以返回字元串中指定位置的字元。位置是用索引來表示的,從0開始。代碼實例如下: var str="antzone"; console.log(str.charAt(1)); 以上代碼可
  • javascript實現的轉義或者還原html標簽:本章節分享兩段代碼實例,它們分別實現了html標簽的轉義和還原功能。一.轉義html標簽: function HtmlEncode(text) { return text.replace(/&/g, '&').replace(/\"/g, '"')
  • css針對各個瀏覽器的首碼是什麼:現在寫css3代碼的時候,為了實現相容性,需要在前面加首碼以便相容對應的瀏覽器。下麵就列舉一下首碼的寫法: -webkit//Webkit內核,例如谷歌和Safari瀏覽器 -moz//Gecko內核,例如火狐瀏覽器 -o//Presto內核,例如Opera瀏覽器
  • JavaScript構成簡介: 互聯網的出現,極大的促進了信息的交流,隨著步伐的前進,網站的交互需求越來越多,但是受限於當時的軟硬體條件,特別是網路環境的限制,非常簡單的表單驗證都要花費大量的時間在伺服器與客戶端之間進行傳輸,為此網景公司推出了最初的LiveScript語言,後來改名為JavaScr
  • altKey屬性的定義和用法:此屬性返回一個布爾值。指示在指定的事件發生時,Alt鍵是否被按下並保持住了。更多相關內容可以參閱javascript的event對象一章節。語法結構: event.altKey=true|false|1|0 瀏覽器支持:1.IE瀏覽器支持此屬性。2.火狐瀏覽器支持此屬性
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...