用纯css改变下拉列表select框的默认样式 - dehua.Chen-html教學-PHP中文網

首頁

web前端

html教學

用纯css改变下拉列表select框的默认样式 - dehua.Chen

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

May 21, 2016 am 08:42 AM

将浏览器默认的下拉框样式清除，然后应用上自己的，再附一张向右对齐小箭头的图片即可。

<span style="color: #008080;"> 1</span> <span style="color: #800000;">select </span>{
<span style="color: #008080;"> 2</span> <span style="color: #008000;">/*</span><span style="color: #008000;">Chrome和Firefox里面的边框是不一样的，所以复写了一下</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 3</span> <span style="color: #ff0000;">  border</span>:<span style="color: #0000ff;"> solid 1px #000</span>;
<span style="color: #008080;"> 4</span> 
<span style="color: #008080;"> 5</span> <span style="color: #008000;">/*</span><span style="color: #008000;">很关键：将默认的select选择框样式清除</span><span style="color: #008000;">*/</span>
<span style="color: #008080;"> 6</span> <span style="color: #ff0000;">  appearance</span>:<span style="color: #0000ff;">none</span>;
<span style="color: #008080;"> 7</span> <span style="color: #ff0000;">  -moz-appearance</span>:<span style="color: #0000ff;">none</span>;
<span style="color: #008080;"> 8</span> <span style="color: #ff0000;">  -webkit-appearance</span>:<span style="color: #0000ff;">none</span>;
<span style="color: #008080;"> 9</span> <span style="color: #008000;">/*</span><span style="color: #008000;">在选择框的最右侧中间显示小箭头图片</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">10</span> <span style="color: #ff0000;">  background</span>:<span style="color: #0000ff;"> url("http://ourjs.github.io/static/2015/arrow.png") no-repeat scroll right center transparent</span>;
<span style="color: #008080;">11</span> <span style="color: #008000;">/*</span><span style="color: #008000;">为下拉小箭头留出一点位置，避免被文字覆盖</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">12</span> <span style="color: #ff0000;">  padding-right</span>:<span style="color: #0000ff;"> 14px</span>;
<span style="color: #008080;">13</span> }
<span style="color: #008080;">14</span> <span style="color: #008000;">/*</span><span style="color: #008000;">清除ie的默认选择框样式清除，隐藏下拉箭头</span><span style="color: #008000;">*/</span>
<span style="color: #008080;">15</span> <span style="color: #800000;">select::-ms-expand </span>{<span style="color: #ff0000;"> display</span>:<span style="color: #0000ff;"> none</span>; }

IE8/9并不支持 appearance:none CSS属性，想要支持的话可能需要非常特殊的方法，参考SF：我们需要为其添加一个父容器，容器是用来覆盖小箭头的，然后为select添加一个向右的小偏移或者宽度大于父级元素。设置父级的CSS属性为超出部分不可见，即可覆盖即小箭头。然后再为父级容器添加背景图片即可。

<span style="color: #008080;">1</span> <span style="color: #0000ff;"><span style="color: #800000;">div </span><span style="color: #ff0000;">id</span><span style="color: #0000ff;">="parent"</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">2</span>   <span style="color: #0000ff;"><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">3</span>       <span style="color: #0000ff;"><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>what<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">4</span>       <span style="color: #0000ff;"><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>the<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">5</span>       <span style="color: #0000ff;"><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>hell<span style="color: #0000ff;"></span><span style="color: #800000;">option</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">6</span>   <span style="color: #0000ff;"></span><span style="color: #800000;">select</span><span style="color: #0000ff;">></span>
<span style="color: #008080;">7</span> <span style="color: #0000ff;"></span><span style="color: #800000;">div</span><span style="color: #0000ff;">></span></span></span></span></span></span>

<span style="color: #008080;">1</span> <span style="color: #800000;">#parent </span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> url('yourimage') no-repeat</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 100px</span>;
<span style="color: #008080;">2</span> <span style="color: #ff0000;">height</span>:<span style="color: #0000ff;"> 30px</span>;<span style="color: #ff0000;"> overflow</span>:<span style="color: #0000ff;"> hidden</span>;}
<span style="color: #008080;">3</span> <span style="color: #800000;">#parent select </span>{<span style="color: #ff0000;">background</span>:<span style="color: #0000ff;"> transparent</span>;<span style="color: #ff0000;"> border</span>:<span style="color: #0000ff;"> none</span>;<span style="color: #ff0000;"> padding-left</span>:<span style="color: #0000ff;"> 10px</span>;<span style="color: #ff0000;"> width</span>:<span style="color: #0000ff;"> 120px</span>;<span style="color: #ff0000;"> height</span>:<span style="color: #0000ff;"> 100%</span>;}

input 背景透明代码

background-color: transparent;

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

公眾號網頁更新緩存難題：如何避免版本更新後舊緩存影響用戶體驗？Mar 04, 2025 pm 12:32 PM

公眾號網頁更新緩存，這玩意兒，說簡單也簡單，說複雜也夠你喝一壺的。你辛辛苦苦更新了公眾號文章，結果用戶打開還是老版本，這滋味，誰受得了？這篇文章，咱就來扒一扒這背後的彎彎繞繞，以及如何優雅地解決這個問題。讀完之後，你就能輕鬆應對各種緩存難題，讓你的用戶始終體驗到最新鮮的內容。先說點基礎的。網頁緩存，說白了就是瀏覽器或者服務器為了提高訪問速度，把一些靜態資源（比如圖片、CSS、JS）或者頁面內容存儲起來。下次訪問時，直接從緩存裡取，不用再重新下載，速度自然快。但這玩意兒，也是個雙刃劍。新版本上線，