建站
咨詢
售后
建站咨詢
新聞中心
用css改變下拉框樣式
例一：
為湘潭縣等地區(qū)用戶提供了全套網(wǎng)頁設計制作服務，及湘潭縣網(wǎng)站建設行業(yè)解決方案。主營業(yè)務為網(wǎng)站制作、成都做網(wǎng)站、湘潭縣網(wǎng)站設計，以傳統(tǒng)方式定制建設網(wǎng)站，并提供域名空間備案等一條龍服務，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務。我們深信只要達到每一位用戶的要求，就會得到認可，從而選擇與我們長期合作。這樣，我們也可以走得更遠！
＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞
＜option value="2" selected＞yesky.com＜/option＞
＜option value="1"＞redidea.net＜/option＞
＜/select＞
查一下手冊,還有好多項可以設置.
例二：
html
head
style
.box
{
border: 1px solid #C0C0C0;
width: 182px;
height: 20px;
clip: rect( 0px, 181px, 20px, 0px );
overflow: hidden;
}
.box2
{
border: 1px solid #F4F4F4;
width: 180px;
height: 18px;
clip: rect( 0px, 179px, 18px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width: 183px;
line-height: 14px; color: #909993;
border-style: none;
border-width: 0px;
}
/style
/head
body
div class = boxdiv class = box2
select size = "1" name = "D1"
option內(nèi)容一/option
option內(nèi)容二/option
/select
/div/div
/body
/html
單選框、復選框、下拉框的CSS怎么寫？
簡單的代碼實現(xiàn)，僅供參考：
單選框：
body????input?type="radio"?name="sex"?value="n"?/????input?type="radio"?name="sex"?value="v"?//body
復選框：
body????input?type="checkbox"?value="n"?/????input?type="checkbox"?value="v"?//body
下拉框：
body????select????????optionn/option????????optionn/option????????optionn/option????/select/body
擴展資料：
css注意事項
1、每個標簽的屬性設置必須是被一對花括號包含。像下面的樣子：
標簽
{
屬性名稱：屬性值;
}
2、花括號中每個屬性值賦值后必須用分號隔開。分號就相當于C#和C中的分號，指示一行語句的結束，加上分號就是和網(wǎng)頁的解釋器說明這個屬性的賦值已經(jīng)結束了，下面開始一個新的屬性的賦值。正確的格式是下面的樣子：
標簽
{
屬性名稱1：屬性值;
屬性名稱2：屬性值;
屬性名稱3：屬性值;
}
3、關于顏色值。我們在前面的文章中，在設置style時，不論是color屬性還是background-color屬性，賦值時都是指定的顏色名稱。這種方式在網(wǎng)頁編程中比較不通用。比較常用的做法是賦16進制值，類似于#RRGGBB這種樣式，每一位的取值都是從1到F，每兩位對應一類顏色值。具體的顏色值可以在網(wǎng)上搜到。
4、關于字體。我們在style中的font-family中設置字體。有時候我們設置的字體可能用戶電腦中沒有，這時候我們可以在font-family中設置多個可選字體，用逗號分隔，這樣如果前面的字體用戶電腦中沒有，則可以使用后面的字體進行替換。下面是個例子：
p sytle="font-family:serif,Cursive,Fantasy;"
參考資料來源：百度百科：CSS
css改變下拉框的下拉小三角樣式
select{
width: 90%;
padding: 8px 0;
font-size: 14px;
border: none;
outline: none;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
}
div:after{
content: "";
width: 13px;
height: 7px;
background: url(../../../images/about/sanjiaoxing2.png) no-repeat center;
-webkit-background-size: 100% 100%;
background-size: 100% 100%;
position: absolute;
right: 20px;
top: 45%;
//給自定義的圖標實現(xiàn)點擊下來功能
pointer-events: none;
}
如何用css做下拉菜單
純CSS的下拉菜單，此處理解的意思就是li標簽套li標簽，然后再給li標簽設置樣式。在被套的li標簽設置平時狀態(tài)為隱藏，再等鼠標移動到上一個li標簽時，將被套的li標簽顯示（樣式：overflow:hidden; ）。
貼一段網(wǎng)上摘的純CSS下拉菜單（二級）
!DOCTYPE HTML
html
head
meta http-equiv="Content-Type" content="text/html; charset=gb2312" /
title利用float制作兼容ie6純css下來菜單/title
style type="text/css"
* { margin:0; padding:0; }
ul { list-style:none; }
a:hover {color:#555; }
.nav { float:left; overflow:hidden; text-align:center; font-size:14px; }
.nav dd { float:left; width:300px; margin:-888px -150px 0 0; }
.nav dd a { float:left; margin-top:888px; display:block; position:relative; background:#eee; width:150px; height:30px; line-height:30px; border-bottom:1px solid #fff; }
.nav a:hover { margin-right:1px; background:#3cf; }
.nav dd ul { float:left; font-size:0; z-index:888; }
.nav dd li a { clear:left; width:150px; margin-top:0; font-size:14px; }
.nav dd li a:hover { margin-right:1px; }
/style
/head
body
dl class="nav"
dda href=""首頁/a/dd
dd
a href=""關于我們/a
ul
lia href=""公司簡介/a/li
lia href=""公司文化/a/li
lia href=""企業(yè)榮譽/a/li
lia href=""聯(lián)系我們/a/li
/ul
/dd
dd
a href=""新聞動態(tài)/a
ul
lia href=""國內(nèi)新聞/a/li
lia href=""國外新聞/a/li
/ul
/dd
dd
a href=""產(chǎn)品展示/a
ul
lia href=""111/a/li
lia href=""222/a/li
/ul
/dd
/dl
/body
/html
怎樣用cssselect下拉框的美化
用cssselect下拉框的美化
這個可以換種方式實現(xiàn)，首先select的樣式每個瀏覽器都有其默認的樣式，需要先去除這些默認樣式，其次，select里面的樣式諸如箭頭，下拉框等等的樣式，這里提供一種思路，就是在select的外層添加一個div，對這個div元素設置樣式，select元素則是沒樣式，從而達到一種掩眼法的效果，實現(xiàn)方式如下：
!-- html 布局 --
div id="selectStyle"
select id="select"
optionoption 1/option
optionoption 2/option
optionoption 3/option
optionoption 4/option
optionoption 5/option
/select
/div
首先要去掉 #select 的默認樣式：
/* 去掉默認樣式，設置新的樣式 */
#select{
display:block;
width:100%;
height:100%;
box-sizing:border-box;
background:none;
border:1px solid #222;
outline:none;
-webkit-appearance:none;
padding:0 5px;
line-height:inherit;
color:inherit;
cursor:default;
font-size:14px;
position:relative;
z-index:3;
}
#select option{
color:#222;
}
#select option:hover{
color:#fff;
}
#select option:checked{
background:#535353;
color:#fff;
}
然后在外層div#selectStyle設置自定義樣式
#selectStyle{
display:block;
margin:0 auto;
overflow:hidden;
height:30px;
width:240px;
border-radius:0;
background:#535353 url("箭頭圖片地址") right center no-repeat;
background-size:auto 80%;
color:#fff;
line-height:2;
/* 如果不想加圖片，
則可以設置一個自己的三角形樣式，
如下的自定義方式，
見代碼1 */
position:relative;
z-index:1;
}
/* 代碼1 */
#selectStyle:before{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-2.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#fff transparent transparent transparent;
content:"";
}
/* 代碼1 */
#selectStyle:after{
position:absolute;
z-index:1;
top:50%;
right:10px;
margin-top:-3.5px;
display:block;
width:0;
height:0;
border-style:solid;
border-width:5px 5px 0 5px;
border-color:#535353 transparent transparent transparent;
content:"";
}
以上就是自定義select樣式的方法；
同時也可以完全不要select這個元素使用div+css來自定義一個跟select一樣效果的下拉框（需要Javascript輔助）。
css怎樣設置下拉列表(select)樣式？
css設置下拉列表(select)樣式首先我們需要獲取到這個元素的id或者是class，然后在通過給這個元素設置它的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
分享標題：css定義下拉框樣式,html下拉框的css代碼
網(wǎng)頁地址：http://www.dlmjj.cn/article/dsdgoso.html
