西西軟件園多重安全檢測(cè)下載網(wǎng)站、值得信賴的軟件下載站!
軟件
軟件
文章
搜索

首頁(yè)編程開(kāi)發(fā)其它知識(shí) → 在 Html 中用 CSS 來(lái)控制 select 標(biāo)簽

在 Html 中用 CSS 來(lái)控制 select 標(biāo)簽

相關(guān)軟件相關(guān)文章發(fā)表評(píng)論 來(lái)源:本站整理時(shí)間:2011/3/18 11:59:32字體大小:A-A+

作者:佚名點(diǎn)擊:500次評(píng)論:0次標(biāo)簽: Html

  • 類型:電子資料大。3.9M語(yǔ)言:中文 評(píng)分:10.0
  • 標(biāo)簽:
立即下載

在 Html 中用 CSS 來(lái)控制 select 標(biāo)簽

在style里寫上 width:px;這個(gè)可以實(shí)現(xiàn). height:px; 這個(gè)就實(shí)現(xiàn)不了. 只能通過(guò)調(diào)整里面字體的大小來(lái)改變高度. background可以實(shí)現(xiàn),但用背景圖就不行了.

select的border是默認(rèn)的藍(lán)色, CSS用border屬性是改變不了的. 只有通過(guò)偽裝的方法才能讓邊框改變,下面詳細(xì)介紹一下:

思路:先建一個(gè)帶有預(yù)想邊框的層, 在里面放上select,其中select的尺寸要比div稍微大一點(diǎn),讓超出層的內(nèi)容隱藏從而遮蓋住select自帶的邊框.

 

今天要做一個(gè)下拉菜單,發(fā)現(xiàn)菜單的CSS樣式很少,達(dá)不到需求。然后上網(wǎng)找代碼,大部分都是要用JS實(shí)現(xiàn),而且代碼非常多,就一個(gè)菜單就要我加那么多代碼 - -,很顯然我是不愿意干的。尋找了N久,找到了一份比較合適的,不過(guò)效果還沒(méi)達(dá)到我的需要,因?yàn)橛心莻(gè)惡心的倒三角。然后稍加修改,終于把那個(gè)惡心的倒三角去掉了。




代碼:

<head>

<style type="text/css">

.selectbox
{
border: 1px solid #C0C0C0;
width: 77px;
height: 16px;
clip: rect( 0px, 60px,16px, 0px );
overflow: hidden;
}
.selectbox2
{
position: relative;
border: 1px solid #F4F4F4;
width: 76px;
height: 15px;
clip: rect( 0px, 80px, 15px, 0px );
overflow: hidden;
}
select
{
position: relative;
left: -2px;
top: -2px;
width:97px;
line-height: 15px; color: #909993;
border-style: none;
border-width: 0px;
}

</style>

</head>

<body>

<div class = selectbox>

<div class = selectbox2>
<select size = "1" name = "D1">
<option>選擇去向</option>
<option>后臺(tái)管理</option>
</select>
</div>

</div>

</body>

    相關(guān)評(píng)論

    閱讀本文后您有什么感想? 已有人給出評(píng)價(jià)!

    • 8 喜歡喜歡
    • 3 頂
    • 1 難過(guò)難過(guò)
    • 5 囧
    • 3 圍觀圍觀
    • 2 無(wú)聊無(wú)聊

    熱門評(píng)論

    最新評(píng)論

    發(fā)表評(píng)論 查看所有評(píng)論(0)

    昵稱:
    表情: 高興 可 汗 我不要 害羞 好 下下下 送花 屎 親親
    字?jǐn)?shù): 0/500 (您的評(píng)論需要經(jīng)過(guò)審核才能顯示)