舉個(gè)例子，照著做就可以了
成都創(chuàng)新互聯(lián)主要為客戶提供服務(wù)項(xiàng)目涵蓋了網(wǎng)頁視覺設(shè)計(jì)、VI標(biāo)志設(shè)計(jì)、全網(wǎng)整合營銷推廣、網(wǎng)站程序開發(fā)、HTML5響應(yīng)式成都網(wǎng)站建設(shè)、手機(jī)網(wǎng)站開發(fā)、微商城、網(wǎng)站托管及成都網(wǎng)站維護(hù)公司、WEB系統(tǒng)開發(fā)、域名注冊(cè)、國內(nèi)外服務(wù)器租用、視頻、平面設(shè)計(jì)、SEO優(yōu)化排名。設(shè)計(jì)、前端、后端三個(gè)建站步驟的完善服務(wù)體系。一人跟蹤測試的建站服務(wù)標(biāo)準(zhǔn)。已經(jīng)為加固行業(yè)客戶提供了網(wǎng)站改版服務(wù)。
style type="text/css"
!--
.select * {
margin: 0;
padding: 0;
}
.select {
border:1px solid #cccccc;
float: left;
display: inline;
}
.select div {
border:1px solid #f9f9f9;
float: left;
}
/* 子選擇器，在FF等非IE瀏覽器中識(shí)別 */
.selectdiv {
width:120px;
height: 17px;
overflow:hidden;
}
/* 通配選擇符，只在IE瀏覽器中識(shí)別 */
* html .select div select {
display:block;
float: left;
margin: -2px;
}
.select divselect {
display:block;
width:124px;
float:none;
margin: -2px;
padding: 0px;
}
.select:hover {
border:1px solid #666666; //鼠標(biāo)移上的效果
}
.select selectoption {
text-indent: 2px; //option在FF等非IE瀏覽器縮進(jìn)2px
}
--
/style
/head
bodydiv class="select"
div
select
option看見效果了吧/option
option看見效果了吧/option
option看見效果了吧/option
/select
/div
/div
你看看這段代碼中對(duì)select的設(shè)置
1、css沒有辦法實(shí)現(xiàn)美化select下拉框的。不管怎么設(shè)定都沒有用的
2、可以通過div+css+jq自己模擬一款css
div class="select"
div class="select_default"/div !--這邊是默認(rèn)展示我們選中的框--
ul class="select_item" !--實(shí)則所有的下拉選項(xiàng)隱藏了，在這個(gè)ul中--
liComplex/li
liKnowledge/li
liCase/li
liArticle/li
liNews/li
/ul
/div
然后結(jié)合jq語法，實(shí)現(xiàn)點(diǎn)擊出現(xiàn)下拉，點(diǎn)擊下拉吧文本賦值到div里頭
3、網(wǎng)絡(luò)搜索下拉框美化插件。
select?{
/*背景：和其他元素一樣，都是設(shè)置?background?屬性*/
background:#F00
/*三角1：先將默認(rèn)的select選擇框樣式清除*/
appearance:none;
-moz-appearance:none;
-webkit-appearance:none;
/*三角2：在選擇框的最右側(cè)中間顯示小箭頭圖片*/
background:?url('XXXXXX/XXXXXX/XXXXXX/xxxxxx.png')?no-repeat?scroll?right?center?transparent;??
/*三角3：為下拉小箭頭留出一點(diǎn)位置，避免被文字覆蓋*/
padding-right:?14px;
}
/*清除ie的默認(rèn)選擇框樣式清除，隱藏下拉箭頭*/
select::-ms-expand?{?display:?none;?}
css設(shè)置下拉列表(select)樣式首先我們需要獲取到這個(gè)元素的id或者是class，然后在通過給這個(gè)元素設(shè)置它的width和height等等一些樣式，具體的看代碼:
html
head
style
.div1{
width:600px;
height:200px;
font-size:13px;
}
.div select{
width:200px;
}
.div select option{
width:150px;
height:30px;
}
/head
body
div class='div1'
select
option value="volvo"Volvo/option
option value="saab"Saab/option
option value="opel"Opel/option
option value="audi"Audi/option
/select
/div
/body
/html
select?的css有效的樣式很有限，很多多是無效，?color，font-size，font-family都能生效的
重慶分公司
重慶分公司
