在 Html 中用 CSS 來控制 select 標簽
在style里寫上 width:px;這個可以實現(xiàn). height:px; 這個就實現(xiàn)不了. 只能通過調(diào)整里面字體的大小來改變高度. background可以實現(xiàn),但用背景圖就不行了.
select的border是默認的藍色, CSS用border屬性是改變不了的. 只有通過偽裝的方法才能讓邊框改變,下面詳細介紹一下:
思路:先建一個帶有預(yù)想邊框的層, 在里面放上select,其中select的尺寸要比div稍微大一點,讓超出層的內(nèi)容隱藏從而遮蓋住select自帶的邊框.
今天要做一個下拉菜單,發(fā)現(xiàn)菜單的CSS樣式很少,達不到需求。然后上網(wǎng)找代碼,大部分都是要用JS實現(xiàn),而且代碼非常多,就一個菜單就要我加那么多代碼 - -,很顯然我是不愿意干的。尋找了N久,找到了一份比較合適的,不過效果還沒達到我的需要,因為有那個惡心的倒三角。然后稍加修改,終于把那個惡心的倒三角去掉了。
代碼:
<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>后臺管理</option>
</select>
</div>
</div>
</body>