用css改變下拉框樣式

例一：

創新互聯建站是一家專業提供銅陵企業網站建設,專注與成都做網站、網站制作、HTML5建站、小程序制作等業務。10年已為銅陵眾多企業、政府機構等服務。創新互聯專業的建站公司優惠進行中。

＜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內容一/option

option內容二/option

/select

/div/div

/body

/html

css樣式選取框

用了JQ庫，樣式在style里，不過要配合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的時候打開注釋 */

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更改表單元素如單選框或下拉框的默認樣式

您好，如單選框，它會默認有一個圓形的選擇框，如果覺得不好看，可以將這個標簽定位到可視界面以外，因為你使用label標簽是可以選中這個選擇框的，你只需要更改該label標簽的樣式就行了

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

1、首先打開hbuilder軟件，新建幾個默認的復選框。

2、然后在上方的style標簽設置input的樣式，先設置input的display屬性為none，將默認的單選框去掉，在設置一下各個單選框的margin的距離。

3、接著在下方繼續設置樣式，設置label標簽的before和after偽元素，將原有before的單選框選中狀態的屬性“checked+label”設置變為紅色實心框，同時未選中的狀態的“label::after”為白色空心方框。

4、最后打開瀏覽器，即可看到設置好的樣式，其中被選中的是紅色的實心方框，沒被選擇的則是沒有顏色的方框。

CSS搜索框樣式

這個搜索框做的很好，看似簡單，里面包含了大量CSS基礎知識。由于時間關系，這里寫了一個相似度為95%的樣式供參考和學習，由于無法確認字體，先挑選了比較接近的Gautami

先上HTML

body

div?id="A"

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

div?id="inputBtn"Go/div

/div

/body

這里開始寫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;?}

/*圖標*/

#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);?}

最后，上效果圖：上為原始搜索框，下為本次代碼實現的搜索框

本文標題：css選框樣式,css設置單選框樣式
網站URL：http://vcdvsql.cn/article18/dsdiddp.html

成都網站建設公司_創新互聯，為您提供軟件開發、App設計、移動網站建設、電子商務、網站內鏈、網站營銷

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯