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

::file-selector-buttonSelectorを使用したファイルアップロードボタンのCSSスタイリング

CSS疑似要素::file-selector-buttonを使用して、ファイルアップロードボタンのスタイルを設定できます。ただし、この疑似要素の完全なサポートはFirefoxとFirefoxAndroidに限定されています。

::-webkit-file-upload-buttonは、Safari、Chrome、Operaをサポートするために使用されます。

構文

CSSファイルセレクタープロパティの構文は次のとおりです-

Selector::file-selector-button {
   attribute: /*value*/
}
Selector::-webkit-file-upload-button {
   attribute: /*value*/
}

例

次の例は、CSSファイルセレクターボタンセレクターを示しています。

<!DOCTYPE html>
<html>
<head>
   <style>
   input[type=file]::file-selector-button:hover {
      cursor: grab;
      background-color: blueviolet;
      color: white;
      font-size: 1.2em;
      box-shadow: inset 5px 10px 10px cornflowerblue;
   }
</style>
</head>
   <body>
      <form>
         <label for="fup">Click to</label>
         <input type="file" id="fup" />
         <input type="text" placeholder="Random Text here" />
         <button type="submit">Done</button>
      </form>
   </body>
</html>

これにより、FirefoxWebブラウザで次の出力が得られます。

::file-selector-buttonSelectorを使用したファイルアップロードボタンのCSSスタイリング

例

<!DOCTYPE html>
<html>
<head>
   <style>
      input[type=file]::file-selector-button:hover {
         cursor: pointer;
         background-color: crimson;
         font-size: 1.2em;
         border-radius: 25%;
         box-shadow: inset 5px 10px 10px cornsilk;
      }
      input[type=file]::-webkit-file-upload-button:hover {
         cursor: pointer;
         background-color: crimson;
         font-size: 1.2em;
         border-radius: 25%;
         box-shadow: inset 5px 10px 10px cornsilk;
      }
   </style>
</head>
   <body>
      <form>
         <label for="fup">Click to</label>
         <input type="file" id="fup" />
         <input type="text" placeholder="using webkit prefix" />
         <button type="submit">Done</button>
      </form>
   </body>
</html>

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

::file-selector-buttonSelectorを使用したファイルアップロードボタンのCSSスタイリング


  1. CSSを使用したFirst-Lettersのスタイリング::first-letter

    CSSは、::first-letter疑似要素を使用して要素の最初の文字のスタイルを設定するのに役立ちます。句読点、有向グラフ、およびコンテンツプロパティによって、最初の文字が変更される可能性があることに注意してください。 次の例は、CSS::first-letter疑似要素を示しています。 例 <!DOCTYPE html> <html> <head> <style> body {    text-align: center; } ::first-letter {    font-size: 3em;

  2. HTMLでファイルアップロードボタンを作成するにはどうすればよいですか？

    HTMLでファイルアップロードボタンを作成する方法については、コードは次のとおりです- 例 <!DOCTYPE html> <html> <head> <h1>File upload button example</h1> <p>Click on the "Choose File" button to upload a file:</p> <form> <input type="file" id="FILE" name="f