<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>Ugly controls basic styling</title>
    <link href="https://fonts.googleapis.com/css?family=Josefin+Sans&display=swap" rel="stylesheet">
  </head>

  <body>
    <form>
      <div>
        <label for="select">Select box:</label>
        <div class="select-wrapper">
            <select id="select" name="select">
              <option>Banana</option>
              <option>Cherry</option>
              <option>Lemon</option>
            </select>
         </div>
      </div>

      <div>
        <label for="myFruit">"Favorite fruit?" datalist:</label>
        <input type="text" name="myFruit" id="myFruit" list="mySuggestion">
        <datalist id="mySuggestion">
          <option>Apple</option>
          <option>Banana</option>
          <option>Blackberry</option>
          <option>Blueberry</option>
          <option>Lemon</option>
          <option>Lychee</option>
          <option>Peach</option>
          <option>Pear</option>
        </datalist>
      </div>

      <div>
        <label for="date1">Datetime local: </label>
        <input id="date1" name="date1" type="datetime-local">
      </div>

      <div>
        <label for="range">Range: </label>
        <input id="range" name="range" type="range">
      </div>

      <div>
        <label for="color">Color: </label>
        <input id="color" name="color" type="color">
      </div>

      <div>
        <label for="file">File picker: </label>
        <input id="file" name="file" type="file" multiple>
        <ul id="file-list"></ul>
      </div>

      <div>
        <label for="progress">Progress: </label>
        <progress max="100" value="75" id="progress">75/100</progress>
      </div>

      <div>
        <label for="meter">Meter: </label>
        <meter  id="meter" min="0" max="100" value="75" low="33" high="66" optimum="50">75</meter>
      </div>

      <div><button>Submit?</button></div>
    </form>
  </body>
</html>
body {
  font-family: 'Josefin Sans', sans-serif;
  margin: 20px auto;
  max-width: 400px;
}

form > div {
  margin-bottom: 20px;
}

button, label, input, select, progress, meter {
  display: block;
  font-family: inherit;
  font-size: 100%;
  margin: 0;
  box-sizing: border-box;
  width: 100%;
  padding: 5px;
  height: 30px;
}

select {
  appearance: none;
}

.select-wrapper {
  position: relative;
}

.select-wrapper::after {
  content: "▼";
  font-size: 1rem;
  top: 6px;
  right: 10px;
  position: absolute;
}

input[type="text"], 
input[type="datetime-local"], 
input[type="color"], 
select {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

label {
  margin-bottom: 5px;
}

button {
  width: 60%;
  margin: 0 auto;
}
const fileInput = document.querySelector('#file');
const fileList = document.querySelector('#file-list');

fileInput.addEventListener('change', updateFileList);

function updateFileList() {
  while (fileList.firstChild) {
    fileList.removeChild(fileList.firstChild);
  }

  let curFiles = fileInput.files;

  if (curFiles.length !== 0) {
    for (let i = 0; i < curFiles.length; i++) {
      const listItem = document.createElement('li');
      listItem.textContent = 'File name: ' + curFiles[i].name + '; file size ' + returnFileSize(curFiles[i].size) + '.';
      fileList.appendChild(listItem);
    }
  }
}

function returnFileSize(number) {
  if (number < 1024) {
    return number + ' bytes';
  } else if (number < 1048576) {
    return (number / 1024).toFixed(1) + ' KB';
  } else {
    return (number / 1048576).toFixed(1) + ' MB';
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.