JSFiddle - React, Tailwind, and code Playground

by Stallman41

HTML

<h1>Match all image files (image/*)</h1>
<p><label>image/* <input type="file" accept="image/*"></label></p>

<h1>Match all video files (video/*)</h1>
<p><label>video/* <input type="file" accept="video/*"></label></p>

<h1>Match all audio files (audio/*)</h1>
<p><label>audio/* <input type="file" accept="audio/*"></label></p>

<h1>Match all image files (image/*) and files with the extension ".someext"</h1>
<p><label>.someext,image/* <input type="file" accept=".someext,image/*"></label></p>
<aside><p>Note: As of writing, the spec specifies a comma-delimited list, but it's provided example is space-delimited.</p></aside>

<h1>Match all image files (image/*) and video files (video/*)</h1>
<p><label>image/*,video/* <input type="file" accept="image/*,video/*"></label></p>
<aside><p>Note: As of writing, the spec specifies a comma-delimited list, but it's provided example is space-delimited</p></aside>

CSS

body {
    margin:1em;
    font-size:.9em;
}
h1 {
    margin:1em 0;
    font-weight:bold;
}
h1:not(:first-of-type) {
    border-top:1px solid #ccc;
    padding:1em 0 0;
}
p {
    margin:1em 0;
}
p label {
    color:#333;
    font-family:sans-serif;
    display:inline-block;
    padding:.1em .1em .1em .3em;
    background:#f7f7f7;
    border:1px solid #ccc;
}
aside {
    margin-top:-.5em;
}
aside p {
    color:#333;
    font-size:.8em;
    font-family:sans-serif;
}