CSSで選択矢印を削除する方法

藏色散人
リリース: 2023-01-04 09:36:11
オリジナル
2525 人が閲覧しました

CSS で選択矢印を削除する方法: 最初に HTML サンプル ファイルを作成し、次に選択タグを使用してラジオまたは複数選択メニューを作成し、最後に「外観:」などの属性を使用してデフォルトの選択ボックス スタイルをクリアします。何もありません。」

CSSで選択矢印を削除する方法

この記事の動作環境: Windows7 システム、HTML5&&CSS3 バージョン、Dell G3 コンピューター。

css クリア選択ドロップダウン矢印スタイル

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <style>
        select::-ms-expand { display: none; }          
         .info-select{
            width: 88px;
            height: 25px;
            border: none;
            outline: none;
            /*将默认的select选择框样式清除*/
            appearance:none;
            -moz-appearance:none;
            -webkit-appearance:none;
            -ms-appearance:none;
           /*在选择框的最右侧中间显示小箭头图片*/
           background: url(img/sele.png) no-repeat scroll right center transparent;     
           /***将sele.png替换为你的下拉箭头**/      
         }
        </style>
    </head>
    <body>
        <select class="info-select">
            <option selected="selected">1</option>
            <option>2</option>
        </select>
    </body>
</html>
ログイン後にコピー

[推奨学習: css ビデオ チュートリアル ]

この例は、selet ドロップダウンを置き換えることができます矢印、のみ適用可能 IE 以外のブラウザの場合、IE スタイルがデフォルトのスタイルです。

以上がCSSで選択矢印を削除する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

関連ラベル:
css
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート