第七色在线视频,2021少妇久久久久久久久久,亚洲欧洲精品成人久久av18,亚洲国产精品特色大片观看完整版,孙宇晨将参加特朗普的晚宴

為了賬號(hào)安全,請(qǐng)及時(shí)綁定郵箱和手機(jī)立即綁定
已解決430363個(gè)問題,去搜搜看,總會(huì)有你想問的

如何在CSS中創(chuàng)建帶有方向向下箭頭的自定義下拉菜單

如何在CSS中創(chuàng)建帶有方向向下箭頭的自定義下拉菜單

RISEBY 2023-06-09 10:57:51
對(duì)于自定義 HTML 下拉菜單,我想使用 CSS 獲得方向向下箭頭樣式。但是我無法實(shí)現(xiàn)示例圖像中描述的下拉菜單的方向箭頭圖標(biāo)樣式。到目前為止,我只得到代碼片段中的三角形向下箭頭。我怎樣才能得到向下的方向箭頭而不是實(shí)心三角形?     select {          /* styling */          background-color: white;          border: thin solid blue;          border-radius: 4px;          display: inline-block;          font: inherit;          line-height: 1.5em;          padding: 0.5em 3.5em 0.5em 1em;          background-image:            linear-gradient(45deg, transparent 50%, gray 50%),            linear-gradient(135deg, gray 50%, transparent 50%),            linear-gradient(to right, transparent, transparent);          background-position:            calc(100% - 20px) calc(1em + 2px),            calc(100% - 15px) calc(1em + 2px),            calc(100% - 2.5em) 0.5em;          background-size:            5px 5px,            5px 5px,            1px 1.5em;          background-repeat: no-repeat;                    /* reset */          margin: 0;                -webkit-box-sizing: border-box;          -moz-box-sizing: border-box;          box-sizing: border-box;          -webkit-appearance: none;          -moz-appearance: none;       } <select>       <option>option 1</option>       <option>option 2</option>       <option>option 3</option>    </select>注意:我可以使用上面的 CSS 實(shí)現(xiàn)三角形向下箭頭。但我需要方向向下箭頭圖標(biāo)樣式,如下面的屏幕截圖所示。
查看完整描述

1 回答

?
不負(fù)相思意

TA貢獻(xiàn)1777條經(jīng)驗(yàn) 獲得超10個(gè)贊

您可以像下面這樣調(diào)整您的代碼:


select {

? /* styling */

? background-color: white;

? border: thin solid blue;

? border-radius: 4px;

? display: inline-block;

? font: inherit;

? line-height: 1.5em;

? padding: 0.5em 3.5em 0.5em 1em;

? --g:transparent 50%, gray 50% calc(50% + 1px), transparent calc(50% + 2px);

? background-image:?

? ? linear-gradient(45deg,? var(--g)),?

? ? linear-gradient(-45deg, var(--g));

? background-position:?

? ? right 20px? top calc(1em + 2px),?

? ? right 15px? top calc(1em + 2px);

? background-size: 5px 5px;

? background-repeat: no-repeat;

? /* reset */

? margin: 0;

? box-sizing: border-box;

? -webkit-appearance: none;

? -moz-appearance: none;

}

<select>

? <option>option 1</option>

? <option>option 2</option>

? <option>option 3</option>

</select>

查看完整回答
反對(duì) 回復(fù) 2023-06-09
  • 1 回答
  • 0 關(guān)注
  • 330 瀏覽
慕課專欄
更多

添加回答

舉報(bào)

0/150
提交
取消
微信客服

購(gòu)課補(bǔ)貼
聯(lián)系客服咨詢優(yōu)惠詳情

幫助反饋 APP下載

慕課網(wǎng)APP
您的移動(dòng)學(xué)習(xí)伙伴

公眾號(hào)

掃描二維碼
關(guān)注慕課網(wǎng)微信公眾號(hào)