css-display.html - mozsearch

Enable keyboard shortcuts

<!doctype html>

<meta charset="utf-8">

<title>Test: File input with CSS display</title>

<link rel="author" title="Mats Palmgren" href="mailto:mats@mozilla.com">

<link rel="help" href="https://html.spec.whatwg.org/multipage/rendering.html#widgets">

<link rel="help" href="https://github.com/whatwg/html/issues/4082">

<link rel="help" href="https://drafts.csswg.org/css-overflow-3/#propdef-overflow">

<link rel="match" href="css-overflow-ref.html">

<style>

input {

  height: 3em;

.inline       { display: inline }

.inline-grid  { display: inline-grid; grid: 500px/500px; align-items: end; }

.inline-flex  { display: inline-flex; flex-flow: column; align-items: end; }

.inline-block { display: inline-block }

.inline-table { display: inline-table }

.inline-columns { display: inline-block; column-width: 500px; column-rule: 10px solid; }

.grid  { display: grid; grid: 500px/500px; align-items: end; }

.flex  { display: flex; flex-flow: column; align-items: end; }

.block { display: block }

.table { display: table }

.columns { display: block; column-width: 500px; column-rule: 10px solid; }

.n { -webkit-appearance:none; appearance:none; }

</style>

<body>

  <input type="file" class="grid">

  <input type="file" class="flex">

  <input type="file" class="block">

  <input type="file" class="table">

  <input type="file" class="columns">

  A<input type="file">

  <input type="file" class="inline">

  <input type="file" class="inline-grid">

  <input type="file" class="inline-flex">

  <input type="file" class="inline-block">

  <input type="file" class="inline-table">

  <input type="file" class="inline-columns">

  A<input disabled type="file">

  <input disabled type="file" class="inline">

  <input disabled type="file" class="inline-grid">

  <input disabled type="file" class="inline-flex">

  <input disabled type="file" class="inline-block">

  <input disabled type="file" class="inline-table">

  <input disabled type="file" class="inline-columns">

  A<input type="file" class="n">

  <input type="file" class="n inline">

  <input type="file" class="n inline-grid">

  <input type="file" class="n inline-flex">

  <input type="file" class="n inline-block">

  <input type="file" class="n inline-table">

  <input type="file" class="n inline-columns">

  A<input disabled type="file" class="n">

  <input disabled type="file" class="n inline">

  <input disabled type="file" class="n inline-grid">

  <input disabled type="file" class="n inline-flex">

  <input disabled type="file" class="n inline-block">

  <input disabled type="file" class="n inline-table">

  <input disabled type="file" class="n inline-columns">

</body>