1. 程式人生 > >自己修改select的樣式(修改select右邊的小三角)

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

CSS就可以解決,原理是將瀏覽器預設的下拉框樣式清除,然後應用上自己的,再附一張向右對齊小箭頭的圖片即可。

select {
  /*Chrome和Firefox裡面的邊框是不一樣的,所以複寫了一下*/
  border: solid 1px #000;

  /*很關鍵:將預設的select選擇框樣式清除*/
  appearance:none;
  -moz-appearance:none;
  -webkit-appearance:none;

  /*在選擇框的最右側中間顯示小箭頭圖片*/
  background: url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent;


  /*為下拉小箭頭留出一點位置,避免被文字覆蓋*/
  padding-right: 14px;
}


/*清除ie的預設選擇框樣式清除,隱藏下拉箭頭*/
select::-ms-expand { display: none; }

參考連結:
http://uplifted.net/programming/change-default-select-dropdown-style-just-css/

相關推薦

自己修改select樣式修改select右邊三角

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

WPF TabIndex預設樣式修改:去掉預設虛線框、自定義樣式Button控制元件為例

去掉Tab選中預設虛線框 Tab鍵切換時,被選控制元件自動存在虛線框,有時候為了介面美觀,這個虛線框就顯得比較麻煩。廢話不多說,下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" TargetType="{

WPF TabIndex預設樣式修改:去掉預設虛線框、自定義樣式Button控制元件為例

去掉Tab選中預設虛線框 Tab鍵切換時,被選控制元件自動存在虛線框,有時候為了介面美觀,這個虛線框就顯得比較麻煩。廢話不多說,下面是方法。 <Window.Resources> <Style x:Key="MeyFocusVisual" Tar

echarts 修改legend樣式矩形、圓、預設等

通過data:[ {name:’南寧-曼芭’,icon:’rect’},{name:’桂林-曼芭’,},{name:’南寧-甲米’,}],//分別修改legend格式 ,預設則為預設 1.預

修改this指向bind、call 和 apply

self 全局 () 用法 兼容 {} ins his post 一、bind 首先: var alertWrite = document.write; alertWrite(‘who am I?‘); 這兩行代碼的運行結果是什麽呢?不要急著回答,看完下面的內容再回答

select標籤下拉多選框

預設顯示的文字變為不可選 <select> <option value="" disabled selected hidden>choose</option> <option value="0">0</option&g

克隆之後一鍵修改IP、刪除Mac地址、修改主機名未測試成功只是思路

克隆之後需要修改IP、刪除Mac地址、修改主機名 $1:表示IP $2:表示主機名 1.IP 因為IP存在於/etc/sysconfig/network-scripts/ifcfg-eth0 替換IP 刪除HWADDR 2.刪除 rm -rf /etc/udev/rules

IntelliJ在類檔案中直接修改包名未定義的包名 提示Package name does not correspond to the file path

問題就是標題中說的那樣 產生的原因就是:在某個包下建立了一個類發現包名不合適,直接在類檔案頭部第一行修改包名想實現跟eclipse一樣通過快捷鍵 快速生成未定義的包並將該類移動到新建的包下,網上的答案出處基本都是來自stackoverflow的提問 該問題stackoverflow地址:

Android中如何修改系統時間應用程式獲得系統許可權

在 Android 的API中有提供 SystemClock.setCurrentTimeMillis()函式來修改系統時間,可惜無論你怎麼呼叫這個函式都是沒用的,無論模擬器還是真機,在logcat中總會得到"Unable to open alarm driver: Permission denied "

轉載:Android中如何修改系統時間應用程式獲得系統許可權

在 android 的API中有提供 SystemClock.setCurrentTimeMillis()函式來修改系統時間,可惜無論你怎麼呼叫這個函式都是沒用的,無論模擬器還是真機,在logcat中總會得到"Unable to open alarm driver: Permission denied "

Ubuntu下修改DNS方法重啟後也保留

有兩個方法,可以讓電腦重啟後也還保留DNS 第一 修改/etc/resolvconf/resolv.conf.d/base(這個檔案預設是空的),在裡面放入如下內容 nameserver 202.98.96.68 nameserver 61.139.2.69儲存後,執行

particle system 渲染在sprite之後,修改渲染層級即要在sprite之前

製作中比如作一個sprite作為2d動畫序列幀渲染動畫,想要新增店particle system , (假如修改了sprite的Order in Layer > 0)那麼此時會發生粒子系統無法在

修改雙系統Linux系統和Windows系統的啟動順序和等待時間

在安裝Linux和Windows雙系統的時候,往往需要先安裝Windows再安裝Linux。這是因為,Linux系統能夠識別Window系統,而Windows系統無法識別Linux系統。如果先安裝Linux系統,再安裝Windows系統,那麼後者的啟動程式就會覆蓋掉前者的啟

重寫select樣式時關於select標籤在div標籤中的位置問題

在重寫select標籤樣式時,遇到了一個瀏覽器相容的問題,其只有谷歌出現了該問題。問題描述如下:用div重寫select樣式程式碼如下: //div標籤樣式 .div-select{   position:absolute;   border:3px solid #000

iOS修改圖片顏色修改畫素色值

轉自:https://www.jianshu.com/p/619ef8423895  假設這樣一個場景:一張圖片中有一朵白花,我們想要把它變成紅花;或者一張圖片中有一段黑色的文字,我們想要把它變成紅色,應該怎麼做? 想要實現這個需求,就需要從畫素尺度上對圖片進行修改,將

Eclipse修改編碼格式修改字符集

預設情況下 Eclipse 字符集為 GBK,但現在專案一般 使用UTF-8,防止專案移植開發出現亂碼,設定 Eclipse 開發環境的專案字符集為 UTF-8, 步驟如下:1、專案設定在選單欄選擇Wi

改變checkbox的樣式選項框中加圖片

radi TE 20px wid 圖片 borde line url appear input[type=‘checkbox‘] { width: 20px; height: 20px; background-color: #fff; -webkit

BootStrap基本樣式必背!!!

<p class="text-left">向左對齊文字</p> <p class="text-center">居中對齊文字</p> <p class="text-right">向右對齊文字</p> <p class="

axure互動樣式下拉列表和矩形

*****矩形互動樣式之單選按鈕*****1、賬號輸入框、密碼輸入框等文字框實現效果:輸入框獲取焦點時邊框是藍色,失 去焦點時邊框為紅色; 2、實現思路:邊框用矩形來設定選中和未選中、禁用和啟用即可 3、切記:選中和未選中、禁用和啟用都是針對外部的矩形不是內部的輸入框! 4、步驟: 1)將矩形【選中】

解決CentOS7沒有mongo.conf,自己vim無法啟動2018/11/8日可用

要保證能在windows遠端連通Linux,首先要保證幾件事。 1.mongodb已經啟動。 2.Linux防火牆添加了mongodb開啟的埠。 3.網路連通。(可通過telnet ip port來測試連通情況) 第一步: 要啟動mongodb網上找的資料,linux環境自己