Attachment 1112 Details for Bug 7909 – HTML file for testing styling of all different types of input elements

HTML file for testing styling of all different types of input elements

inputs.html (text/html), 8.38 KB, created by Samuel Mannehed on 2023-03-30 15:13:22 CEST

(hide)

Description:

Filename:

MIME Type:

Creator: Samuel Mannehed

Created: 2023-03-30 15:13:22 CEST

Size: 8.38 KB

patch

obsolete

><!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">
>  
>  
>  
>  
>  
>  
></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>
>
>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>

<!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>

Actions: View

Attachments on bug 7909: 1097 | 1111 | 1112 | 1119