1. 程式人生 > >修改select預設樣式,相容IE9

修改select預設樣式,相容IE9

前面有篇文章已經提供瞭如何修改select標籤的預設樣式,但是隻能相容到ie10,要相容ie9只能模擬一個類似的

html結構:

<div class="select_diy">
                                    <select>
                                        <option value="產品諮詢1">產品諮詢1</option>
                                        <option value="產品諮詢2">產品諮詢2</option>
                                        <option value="產品諮詢3">產品諮詢3</option>
                                        <option value="產品諮詢4">產品諮詢4</option>
                                    </select>
                                    <div class="select_diy_select"></div>
                                </div>

css樣式:

.contactus2_con select{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance:none;
    background:none;
    background:url("../images/select.jpg") right center no-repeat;
    background:white\9\0;
    width:490px;
    border:1px solid #d9d9d9;
    height:30px;
    cursor:pointer;
}
.contactus2_con select::-ms-expand

{
    color: #fff;
    font-size:20px;
    padding:5px 9px;
    background: #0054a7;
}
.select_diy{
    position:relative;
    width:490px;
}
.select_diy_select{
    position:absolute;
    top:0px;
    right:0px;
    width:37px;
    height:30px;
    background:url("../images/select.jpg") center center;
    border-radius:0px 4px 4px 0px;
    cursor:pointer;
}

js:

 $(".select_diy_select").click(function(){
                
var $target = $(this).siblings("select");
var $clone = $target.clone();
$clone.val($target.val()).css({
position: 'absolute',
'z-index': 999,
width:$target.width(),
left: $target.offset().left,
top: $target.offset().top + $target.height()
}).attr('size', $clone.find('option').length).change(function() {
$target.val($clone.val());
}).on('click blur',function() {
$(this).remove();
});
$('body').append($clone);
$clone.focus(); 
            });

效果如下圖:


相關推薦

修改select預設樣式相容IE9

前面有篇文章已經提供瞭如何修改select標籤的預設樣式,但是隻能相容到ie10,要相容ie9只能模擬一個類似的 html結構: <div class="select_diy">                                     <s

模擬select樣式+功能相容IE9+

效果:程式碼:用了rem作單位,jquery.js<!doctype html> <html> <meta charset="utf-8"> <title>

使用label標籤修改checkbox預設樣式

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>checkbox css change</title> <style typ

select預設文字不出現在下拉選項中

<select>     <option value="" disabled selected hidden>預設提示資訊</option>     <option value=

【css】 如何修改select樣式

select { /*清除select預設樣式*/ appearance:none; -moz-appearance:none; -webkit-appearance:none; -ms-appearance:none; border:1px solid #CCC; width:330px; heigh

小程式修改radio預設樣式

<radio-group class="radio-group" bindchange="radioChange"> <label class="radio" wx:for="{{classes_array}}" wx:key="{{index}}"&g

select預設文字不出現在下拉選項中(轉)

<select>     <option value="" disabled selected hidden>choose</option>     <option value="0">0</option>     

ng-repeat設定第一個元素為預設樣式點選其餘元素切換樣式

如何在ng-repeat時預設第一個元素background-color為紅色,點選對應元素背景變紅同時更換其他全為黑色 提供一個簡單思路: JS: $scope.isActive = 0; $scope.arr = [ { //code he

去除蘋果手機select 預設樣式

主要用的是 -webkit-appearance: none;/*相容蘋果手機*/ 這是一個小demo <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &

自己修改select樣式修改select右邊的小三角)

CSS就可以解決,原理是將瀏覽器預設的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。 select { /*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/ border: solid 1px #000; /*很關鍵:

太激動!Android修改全域性字型樣式替換整個APP字型

最近一直在如何全域性修改app字型上困惑著,今天終於有了突破。我將蒐集的資料進行了整理,現在提供給大家。 前面為分析,建議直接翻到最後看【個人中心設定】。 首先將專案需要的字型資源放置在app下: 這是我自己找的字型檔案,分別代表粗體,方正準圓,華

css修改select標籤預設樣式

之前寫select選擇框的時候就發現pc端在不同瀏覽器會有不同樣式,在移動端更是醜的厲害。於是在網上扒拉總結了幾個清除預設樣式的方法,以備日後之需。 一、 ios端去除預設樣式: backgro

去除select下拉框預設樣式以及一些相容問題

今天遇到的問題,並在這裡做一下記錄和總結,快下班啦 happy!!! 去除select下拉框預設樣式 select { /*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/ border: solid 1px #000; /*很關鍵:將

修改dedecms文章預設連結樣式利於SEO優化

我們要知道的是URL指的是站內內頁的帖子路徑,一般我們會把它縮減到最短,越短越好,利於搜尋引擎收錄和優化,下面我們來簡單講述下到底在哪裡可以修改帖子路徑到最簡短的方式: 1.首先,我們開啟 核心 網站欄目管理 在建立欄目的之後先不點提交直接點 高階選項,如下圖: 2

修改單選框複選框預設樣式 input[type='radio'] input[type="checkbox"]

由於業務需求,本樣式中修改的單選框和複選框的樣式是一樣的。 效果圖:         複選框                                                           單選框                        

修改input file檔案上傳的預設樣式 相容ie8

input(file)瀏覽按鈕美化 首先我們先要了解一下各瀏覽器的瀏覽按鈕的共同特性: 都可以設定整體的寬度和高度,但在IE、火狐、Opera中設定寬度不影響瀏覽按鈕的寬度; 谷歌中只要是input的區域單擊可彈出視窗;IE(IE6中沒試)中,單擊瀏覽按鈕

如何修改radio和select預設樣式?

今天給大家分享一下, 如何改變預設radio和select的樣式? 分享人:Kattem 1.背景介紹 單選按鈕 && 下拉列表 以上兩種展示資料的方式分別由表單元素中的input標籤和select標籤實現, 其中input元素使用

js自定義修改復選框單選框樣式清除復選框單選框默認樣式

radio 技術分享 b2c 如果 watermark css 狀態 初始化 -a 之前做項目的時候,也遇到過需要按照設計稿把<input type="checkbox">和<input type="radio">的默認樣式進行修改,但發現,並沒有可

修改select樣式

git -a ati hang lac .net otn fire -s CSS就可以解決,原理是將瀏覽器默認的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。 select { /*Chrome和Firefox裏面的邊框是不一樣的,

JavaScript修改DOM節點時樣式優先級的問題

tro cti 設置 scrip classname 方法 class 沒有 color   通過element.style.xxx設置或者讀取的xxx樣式屬性,都是屬於行間樣式(<p style="color=red"></p>),並不是 使用li