View All Attachments for Bug 7909

Attachment #1112
HTML file for testing styling of all different types of input elements	text/html	2023-03-30 15:13:22 CEST	8.38 KB	no flags	Details

<!DOCTYPE html>
<html class="noVNC_connected">
<head>
  <title>ThinLinc</title>

  <link rel="stylesheet" href="styles/input.css" type="text/css">
  <link rel="stylesheet" href="styles/constants.css" type="text/css">
  <link rel="stylesheet" href="styles/fonts.css" type="text/css">
  <!-- <link rel="stylesheet" href="https://localhost:300/styles/input.css" type="text/css"> -->
  <!-- <link rel="stylesheet" href="https://localhost:300/styles/constants.css" type="text/css"> -->
  <!-- <link rel="stylesheet" href="https://localhost:300/styles/fonts.css" type="text/css"> -->
  <!-- <link rel="stylesheet" href="https://localhost:300/styles/tlwebaccess.css" type="text/css"> -->
  <!-- <link rel="stylesheet" href="https://localhost:300/app/styles/base.css" type="text/css"> -->
  <!-- <link rel="stylesheet" href="https://localhost:300/app/styles/thinlinc.css" type="text/css"> -->
</head>
<style>
body {
  height: unset;
  touch-action: unset;
  background-color: unset;

  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: baseline;
}
body > * {
  margin-left: 20px;
}
hr {
  width: 100%;
  margin-left: 0;
}
/* An example of a close-button with an SVG */
button.close {
  width: 35px;
  height: 35px;
  padding: 0;
  min-width: unset;
  display: grid;
  place-items: center;
}
/*#noVNC_control_bar {
  display: contents;
}*/
</style>
<script>
  window.onload = function () {
    Array.from(document.getElementsByClassName("indeterminate")).forEach(elem => elem.indeterminate = true);
  };
</script>
<body>

<!-- <hr> -->
<!-- <div id="noVNC_control_bar"> -->
<!-- control bar button -->
<!-- <input type="image" src="app/images/toggleextrakeys.svg" class="noVNC_button"> -->
<!-- control bar button (selected) -->
<!-- <input type="image" src="app/images/toggleextrakeys.svg" class="noVNC_button noVNC_selected"> -->
<!-- control bar button (:disabled) -->
<!-- <input type="image" src="app/images/toggleextrakeys.svg" class="noVNC_button" disabled> -->
<!-- </div> -->
<hr>

input[type=button]
<input type="button" value="Input button">
input[type=button]:disabled
<input type="button" value="Input button" disabled>
<hr>

input[type=checkbox]
<label><input type="checkbox">1</label>
<label><input type="checkbox" class="indeterminate">2</label>
<label><input type="checkbox" checked>3</label>
input[type=checkbox]:disabled
<label><input type="checkbox" disabled>1</label>
<label><input type="checkbox" class="indeterminate" disabled>2</label>
<label><input type="checkbox" checked disabled>3</label>
<hr>

input[type=checkbox].toggle
<label><input type="checkbox" class="toggle">1</label>
<label><input type="checkbox" class="toggle indeterminate">2</label>
<label><input type="checkbox" class="toggle" checked>3</label>
input[type=checkbox].toggle:disabled
<label><input type="checkbox" class="toggle" disabled>1</label>
<label><input type="checkbox" class="toggle indeterminate" disabled>2</label>
<label><input type="checkbox" class="toggle" checked disabled>3</label>
<hr>

input[type=color]
<input type="color">
input[type=color]:disabled
<input type="color" disabled>
<hr>

input[type=date]
<input type="date" value="2022-02-02">
input[type=date]:disabled
<input type="date" value="2022-02-02" disabled>
<hr>

input[type=datetime-local]
<input type="datetime-local" value="2022-02-02 22:22">
input[type=datetime-local]:disabled
<input type="datetime-local" value="2022-02-02 22:22" disabled>
<hr>

input[type=email]
<input type="email" value="samuel@cendio.se">
input[type=email]:disabled
<input type="email" value="samuel@cendio.se" disabled>
<hr>

input[type=file]
<input type="file">
input[type=file]:disabled
<input type="file" disabled>
<hr>

input[type=image]
<input type="image">
input[type=image]:disabled
<input type="image" disabled>
<hr>

input[type=month]
<input type="month" value="October">
input[type=month]:disabled
<input type="month" value="October" disabled>
<hr>

input[type=number]
<input type="number" value="1">
input[type=number]:disabled
<input type="number" value="1" disabled>
<hr>

input[type=password]
<input type="password" value="123password123">
input[type=password]:disabled
<input type="password" value="123password123" disabled>
<hr>

input[type=radio]
<label><input type="radio" name="1">1</label>
<label><input type="radio" name="2">2</label>
<label><input type="radio" name="1" checked>3</label>
input[type=radio]:disabled
<label><input type="radio" name="3" disabled>1</label>
<label><input type="radio" name="4" disabled>2</label>
<label><input type="radio" name="3" checked disabled>3</label>
<hr>

input[type=range]
<input type="range">
input[type=range]:disabled
<input type="range" disabled>
<hr>

input[type=reset]
<input type="reset">
input[type=reset]:disabled
<input type="reset" disabled>
<hr>

input[type=search]
<input type="search" value="what can i search for">
input[type=search]:disabled
<input type="search" value="what can i search for" disabled>
<hr>

input[type=submit]
<input type="submit">
input[type=submit]:disabled
<input type="submit" disabled>
<hr>

input[type=tel]
<input type="tel" value="073 701 64 81">
input[type=tel]:disabled
<input type="tel" value="073 701 64 81" disabled>
<hr>

input[type=text]
<input type="text" value="text">
input[type=text]:disabled
<input type="text" value="text" disabled>
<hr>

input[type=time]
<input type="time" value="22:22:22">
input[type=time]:disabled
<input type="time" value="22:22:22" disabled>
<hr>

input[type=url]
<input type="url" value="https://cendio.com">
input[type=url]:disabled
<input type="url" value="https://cendio.com" disabled>
<hr>

input[type=week]
<input type="week" value="42">
input[type=week]:disabled
<input type="week" value="42" disabled>
<hr>

button[type=submit]
<button type="submit">Submit</button>
button[type=submit]:disabled
<button type="submit" disabled>Submit</button>
<hr>

button[type=reset]
<button type="reset">Reset</button>
button[type=reset]:disabled
<button type="reset" disabled>Reset</button>
<hr>

button[type=button]
<button type="button">Button</button>
button[type=button]:disabled
<button type="button" disabled>Button</button>
<hr>

button.close > icon
<button type="button" class="close">
  <svg width="11" height="11" version="1.1" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
    <path d="M 2 2, 9 9" stroke="black" stroke-width="2.2" stroke-linecap="round"></path>
    <path d="M 9 2, 2 9" stroke="black" stroke-width="2.2" stroke-linecap="round"></path>
  </svg>
</button>
button.close:disabled > icon
<button type="button" class="close" disabled>
  <svg width="11" height="11" version="1.1" viewBox="0 0 11 11" xmlns="http://www.w3.org/2000/svg">
    <path d="M 2 2, 9 9" stroke="black" stroke-width="2.2" stroke-linecap="round"></path>
    <path d="M 9 2, 2 9" stroke="black" stroke-width="2.2" stroke-linecap="round"></path>
  </svg>
</button>
<hr>

select
<select>
<option>first option</option>
<option>1</option>
<option>2</option>
<option>3</option>
</select>
select:disabled
<select disabled>
<option>first option</option>
<option>1</option>
</select>
<hr>

select[size=8]
<select size="8">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option selected>very long option 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
</option>
</select>
select[size=8]:disabled
<select size="8" disabled>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option selected>very long option 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
</option>
</select>
<hr>

textarea
<textarea>
very long text 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789 123456789
</textarea>
textarea:disabled
<textarea disabled>
textarea
</textarea>
<hr>

</body>

</html>

Attachment #1119
Table headers centered on iOS 15.7.3	image/png	2023-04-18 11:03:19 CEST	168.57 KB	no flags	Details