用css改變下拉框樣式

例一：

創(chuàng)新互聯(lián)建站是一家專業(yè)提供銅陵企業(yè)網(wǎng)站建設(shè),專注與成都做網(wǎng)站、網(wǎng)站制作、HTML5建站、小程序制作等業(yè)務(wù)。10年已為銅陵眾多企業(yè)、政府機(jī)構(gòu)等服務(wù)。創(chuàng)新互聯(lián)專業(yè)的建站公司優(yōu)惠進(jìn)行中。

＜select name="select" size="1" style="font-family:Verdana,Arial; font-size: 9pt; color: #FF0000"＞

＜o(jì)ption value="2" selected＞yesky.com＜/option＞

＜o(jì)ption value="1"＞redidea.net＜/option＞

＜/select＞

查一下手冊(cè),還有好多項(xiàng)可以設(shè)置.

例二：

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樣式選取框

用了JQ庫(kù)，樣式在style里，不過(guò)要配合js用

!DOCTYPE html

html

head

meta charset="utf-8"

title/title

script src="jquery-3.3.1.min.js"/script

/head

style

.div1{

text-align: center;

background: beige;

width: 50px;

height: 28px;

border-radius: 14px;

}

.span1{

/* margin-top: 7px; */ /* div的時(shí)候打開(kāi)注釋 */

background: #CCCCCC;

width: 13px;

height: 13px;

display: inline-block;

border-radius: 7px;

}

.div2{

text-align: center;

background: lawngreen;

width: 50px;

height: 28px;

border-radius: 14px;

}

.span2{

background: white;

width: 13px;

height: 13px;

display: inline-block;

border-radius: 7px;

}

.hid1{

display: none;

}

.hid2{

}

/style

body

!-- button的 --

button class="div1"

span class="hid1"是/span

span class="span1"/span

span class="hid2"否/span

/button

hr

hr

!-- div的 --

!-- div class="div1"

span class="hid1"是/span

span class="span1"/span

span class="hid2"否/span

/div --

/body

script

$(function(){

$(".div1").click(function(){

$(".span1").toggleClass("span2");

$(".div1").toggleClass("div2");

$(".hid1").toggle();

$(".hid2").toggle();

})

})

/script

/html

如何用css更改表單元素如單選框或下拉框的默認(rèn)樣式

您好，如單選框，它會(huì)默認(rèn)有一個(gè)圓形的選擇框，如果覺(jué)得不好看，可以將這個(gè)標(biāo)簽定位到可視界面以外，因?yàn)槟闶褂胠abel標(biāo)簽是可以選中這個(gè)選擇框的，你只需要更改該label標(biāo)簽的樣式就行了

div+css中將默認(rèn)的單選按鈕樣式（圓的）變成正方形的樣式怎么寫?

1、首先打開(kāi)hbuilder軟件，新建幾個(gè)默認(rèn)的復(fù)選框。

2、然后在上方的style標(biāo)簽設(shè)置input的樣式，先設(shè)置input的display屬性為none，將默認(rèn)的單選框去掉，在設(shè)置一下各個(gè)單選框的margin的距離。

3、接著在下方繼續(xù)設(shè)置樣式，設(shè)置label標(biāo)簽的before和after偽元素，將原有before的單選框選中狀態(tài)的屬性“checked+label”設(shè)置變?yōu)榧t色實(shí)心框，同時(shí)未選中的狀態(tài)的“l(fā)abel::after”為白色空心方框。

4、最后打開(kāi)瀏覽器，即可看到設(shè)置好的樣式，其中被選中的是紅色的實(shí)心方框，沒(méi)被選擇的則是沒(méi)有顏色的方框。

CSS搜索框樣式

這個(gè)搜索框做的很好，看似簡(jiǎn)單，里面包含了大量CSS基礎(chǔ)知識(shí)。由于時(shí)間關(guān)系，這里寫了一個(gè)相似度為95%的樣式供參考和學(xué)習(xí)，由于無(wú)法確認(rèn)字體，先挑選了比較接近的Gautami

先上HTML

body

div?id="A"

input?id="inputTxt"?type="text"?placeholder="Search"?/

div?id="inputBtn"Go/div

/div

/body

這里開(kāi)始寫CSS

body?{?padding:?0;?margin:?0;?background:?#D6D6D6;?}

/*固定容器*/

#A?{?width:?316px;?height:?28px;?margin:?22%?auto;?border:?1px?solid?#A3A3A3;?border-top-color:?#939393;?border-bottom-color:?#D5D5D5;?border-radius:?3px;?box-shadow:?0px?1px?1px?#f4f4f4;?position:?relative;?}

#A??*?{?position:?absolute;?top:?0;?}

/*輸入框*/

#inputTxt?{?left:?0;?width:?246px;?height:?24px;?background:?#E6E6E6;?border:?0;?border-top:?1px?solid?#C8C8C8;?border-bottom:?1px?solid?#E6E6E6;?outline:?none;?padding-left:?30px;?color:?#666;?}

#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?color:?#B8B8B8;?font:?600?13px?'Gautami';?}

/*按鈕*/

#inputBtn?{?right:?0;?width:?38px;?height:?26px;?line-height:?26px;?background:?linear-gradient(#E4E4E4,?#B5B5B5);?border:?1px?solid?transparent;?border-top-color:?#FCFCFC;?border-left-color:?#ADADAD;?border-bottom-color:?#B5B5B5;?color:?#6E6E6E;?text-align:?center;?font-size:?smaller;?font-weight:?bold;?cursor:?pointer;?}

/*文字陰影*/

#inputTxt,?#inputBtn,?#inputTxt::-webkit-input-placeholder,#inputTxt::-moz-placeholder?{?text-shadow:?1px?1px?0px?#fff;?}

/*圖標(biāo)*/

#A:before,?#A:after?{?content:?"";?position:?absolute;?z-index:?2;?box-shadow:?0px?1px?0px?#fff;?}

#A:before?{?left:?9px;?top:?9px;?width:?6px;?height:?6px;?border:?2px?solid?#ccc;?border-radius:?50%;?}

#A:after?{?left:?17px;?top:?18px;?width:?6px;?height:?2px;?background:?#ccc;?transform:?rotate(45deg);?-webkit-transform:?rotate(45deg);?-o-transform:?rotate(45deg);?}

最后，上效果圖：上為原始搜索框，下為本次代碼實(shí)現(xiàn)的搜索框

本文標(biāo)題：css選框樣式,css設(shè)置單選框樣式
網(wǎng)站URL：http://chinadenli.net/article18/dsdiddp.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供軟件開(kāi)發(fā)、App設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、電子商務(wù)、網(wǎng)站內(nèi)鏈、網(wǎng)站營(yíng)銷

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)