select自定義下拉箭頭

阿新 • • 發佈：2019-02-08

現場還原

在HTML5開發APP應用的過程中，有些表單頁面需要用到select標籤，開發的時候用的安卓手機測試，樣式的顯示非常完美，但一用蘋果手機測試，select的下拉箭頭就不會顯示。

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <title>select修改下拉按鈕</title>
</head>
<body>
   <select name="" id="">
       <option 
 value="aaa">aaa</option>
       <option value="bbb">bbb</option>
       <option value="ccc">ccc</option>
       <option value="ddd">ddd</option>
       <option value="eee">eee</option>
   </select>
</body>
</html>

解決方案

在考慮之後決定利用css中的背景圖片的方式解決這個相容問題，先將select的預設樣式去除，然後將下拉箭頭的圖示設定到background中。

css程式碼

<style>
    select {
        /*Chrome和Firefox裡面的邊框是不一樣的，重新覆蓋一下*/
        border: solid 1px #000;
        /*很關鍵：將預設的select選擇框樣式清除*/
        appearance:none;
        -moz-appearance:none;
        -webkit-appearance:none;
        /*在選擇框的最右側中間顯示下拉箭頭圖片*/
         background: url("下拉箭頭圖片")  right center no-repeat 
;
        /*為下拉小箭頭留出一點位置，避免被文字覆蓋*/
        padding-right: 20px;
    }
    /*清除ie的預設選擇框樣式清除，隱藏下拉箭頭*/
    select::-ms-expand { display: none; }
</style>

select自定義下拉箭頭

現場還原在HTML5開發APP應用的過程中，有些表單頁面需要用到select標籤，開發的時候用的安卓手機測試，樣式的顯示非常完美，但一用蘋果手機測試，select的下拉箭頭就不會顯示。 <!DOCTYPE html> <html la

自定義下拉列表select樣式

jq： $(".select-head").each(function(){ $(this).click(function(event) {//自定義下拉列表框顯示和隱藏console.log(0);$(this).siblings("ul.option").toggleC

select+ztree自定義下拉框整合ztree

效果圖：一、需要引入檔案有：jquery.js、zTree/2.6/zTreeStyle.css、zTree/2.6/jquery.ztree-2.6.min.js 注意引入先後順序要先引入jquery.js；二、html程式碼： <input

【4】自定義下拉框

order viewport down jquer pos bottom last png 下拉框 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8

自定義下拉框樣式，利用prototype制作

制作 pointer code javascrip .text att .com 自定義 cti <script type="text/javascript" src="js/jquery-1.7.2.min.js" ></script>

Android PullToRrefresh 自定義下拉刷新動畫（listview、scrollview等）

appear ram nal ima cas 創建 protect tom inter PullToRefreshScrollView 自定義下拉刷新動畫，只需改一處。以下部分轉載自http://blog.csdn.net/superjunjin/article/

使用 CSS overscroll-behavior 控制滾動行為：自定義下拉刷新和溢出效果

pull str 新的 title contain 下拉刷新介紹 select data CSS 的新屬性 overscroll-behavior 允許開發者覆蓋默認的瀏覽器滾動行為，一般用在滾動到頂部或者底部。背景滾動邊界和滾動鏈接（boundary & c

WPF 自定義下拉列表

LV mage png gif ces hid IT orm false XAML代碼： <Popup x:Name="popupStrategy" StaysOpen="False" PopupAnimation="Scroll" Width="190"

ABAP如何自定義下拉列表 .

app class AD 定義 fault pre amp 列表 nbsp 1. 在選擇屏幕上添加下拉列表控件, 代碼如下： PARAMETERS: auart LIKE vapma-auart AS LISTBOX VISIBLE LENGTH 6

jq自定義下拉菜單，當用戶點擊非自身元素（下拉菜單）本身時關閉下拉菜單

info alt one === 下拉 AS 菜單 com code jq自定義下拉菜單，當用戶點擊非自身元素（下拉菜單）本身時關閉下拉菜單截圖：代碼如下： //關閉用戶菜單 $(document).mousedown(function(e){

select默認下拉箭頭改變、option樣式清除

-a lec expand 問題 AD :hover 谷歌 chrom 簡單的谷歌、火狐、ie下 select 的默認下拉箭頭圖標差別還是比較大，一般我們都會清除默認樣式，重新設計箭頭圖標； /* --ie清除--*/ select::-ms-expand{ disp

Android UI- PullToRrefresh自定義下拉重新整理動畫

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

小程式例項：如何自定義下拉重新整理

js // components/test/test.js Component({ /*** 元件的屬性列表*/ properties: { }, /*** 元件的初始資料*/ data: { scrollHeight: 0, startY: 0, ti

小程式自定義下拉重新整理

自定義元件： js: // components/test/test.js Component({ /** * 元件的屬性列表 */ properties: { }, /** * 元件的初始資料 */ data: { scrollHeight

原生js實現一個自定義下拉單選選擇框

　　瀏覽器自帶的原生下拉框不太美觀，而且各個瀏覽器表現也不一致，UI一般給的下拉框也是和原生的下拉框差別比較大的，這就需要自己寫一個基本功能的下拉選單/下拉選擇框了。最近，把專案中用到的下拉框元件重新封裝了一下，以建構函式的方式進行封裝，主要方法和事件定義在原型上，下面是主要的實現程式碼並添加了比較詳細的註釋

移動端自定義下拉框【H5+js+css】

var weekdayArr = ['男', '女'];// var age1 = ['18', '19', '20', '21', '22', '23', '24', '25', '26', '27', '28', '29', '30', '31', '32', '33', '34', '3

jqGrid 單元格編輯自定義下拉選擇框動態資料來源通用實現

jqGrid編輯型別可分為：單元格編輯(Cell editing)、行內編輯(Inline editing)和表單編輯(Form editing)，本文討論單元格編輯模式下，下拉選擇框的通用實現。jqGrid自帶下拉選擇框編輯型別，只要設定edittype='select’並設定editop

wxpython自定義下拉列表框

自定義wxpython下拉列表框，支援修改邊框顏色，按鈕圖示的動態變換原理同前兩片文章一樣，使用了兩個wx.staticText做邊框，一個文字框來顯示下拉列表的資料，和一個圖片按鈕，實現下拉的標誌，和一個自帶的列表框，影藏該列表框，不要原來的樣式，這裡只需要使用它的展示列表的資料功能

SELECT2自定義下拉框

SELECT2自定義下拉框安裝參考：Getting Started | Select2 - The jQuery replacement for select boxes 快速使用 html: <select class="js-ex

自定義下拉重新整理控制元件-仿美團重新整理效果

概述　　下拉重新整理是平時專案中最常用的功能,今天要說的就是如何自定義下拉重新整理控制元件。　　第三方重新整理控制元件也比較多，例如Android-PullToRefresh,XListView等，但是這些控制元件自定義重新整理頭部不那麼容易擴充套件，它

select自定義下拉箭頭

現場還原

解決方案

相關推薦