CSS
 Computer >> コンピューター >  >> プログラミング >> CSS

CSSの外観で入力を選択するためのドロップダウン矢印を非表示にする

外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。

構文

CSSの外観プロパティの構文は次のとおりです-

Selector {
   appearance: /*value*/;
   -webkit-appearance: /*value*/; /*for Safari and Chrome */
   -moz-appearance: /*value*/; /*for Firefox */
}

例

次の例は、CSSの外観プロパティを示しています。

<!DOCTYPE html>
<html>
   <head>
      <style>
         input[type=number] {
            width: 40px;
            -moz-appearance: textfield;
         }
         input[type=number]:hover {
            background-color: #e3f5a1;
         }
         input::-webkit-inner-spin-button {
            -webkit-appearance: none;
         }
      </style>
   </head>
   <body>
      <p>Type/Scroll to change value</p>
      <input type="number" value="6">
   </body>
</html>

これにより、次の出力が得られます

CSSの外観で入力を選択するためのドロップダウン矢印を非表示にする

CSSの外観で入力を選択するためのドロップダウン矢印を非表示にする

例

<!DOCTYPE html>
<html>
   <head>
      <style>
         select {
            width: 20%;
            appearance: none;
            -webkit-appearance: none;
            -moz-appearance: none;
         }
      </style>
   </head>
   <body>
      Hiding dropdown arrow<br/><br/>
      <select>
         <option value="none" selected disabled hidden>
            Select color
         </option>
         <option>Red</option>
         <option>Blue</option>
         <option>Green</option>
         <option>Yellow</option>
         <option>Orange</option>
      </select>
   </body>
</html>

これにより、次の出力が得られます

CSSの外観で入力を選択するためのドロップダウン矢印を非表示にする


  1. ::markerCSSSelectorを使用してリストの箇条書きの色を変更する

    構文 CSS::マーカーセレクターの構文は次のとおりです- Selector::marker {    attribute: /*value*/; } 例 次の例は、CSS::マーカーセレクターを示しています。 <!DOCTYPE html> <html>    <head>       <style>          ul {             list-

  2. CSSの外観プロパティを持つカスタムチェックボックス

    外観プロパティを使用して、ユーザーのオペレーティングシステムのプラットフォームネイティブスタイルに従って要素のスタイルを設定します。 構文 CSSの外観プロパティの構文は次のとおりです- Selector {    appearance: /*value*/;    -webkit-appearance: /*value*/; /*for Safari and Chrome */    -moz-appearance: /*value*/; /*for Firefox */ } 例 次の例は、CSSの外観プロパティを示しています。