Attachment 1097 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), 5.38 KB, created by Samuel Mannehed on 2022-12-16 12:44:20 CET

(hide)

Description:

Filename:

MIME Type:

Creator: Samuel Mannehed

Created: 2022-12-16 12:44:20 CET

Size: 5.38 KB

patch

obsolete

><!DOCTYPE html>
><html class="noVNC_connected">
><head>
>  <title>ThinLinc</title>
>
>  <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">
>  
>  
>  
></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;
>}
>/*#noVNC_control_bar {
>  display: contents;
>}*/
></style>
><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" checked>2</label>
>input[type=checkbox]:disabled
><label><input type="checkbox" disabled>1</label>
><label><input type="checkbox" checked disabled>2</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" checked>1</label>
><label><input type="radio" name="1">2</label>
>input[type=radio]:disabled
><label><input type="radio" name="2" disabled>1</label>
><label><input type="radio" name="2" checked disabled>2</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:disabled
><button type="reset" disabled>Reset</button>
><hr>
>
>button[type=button]
><button type="button">Button</button>
>button:disabled
><button type="button" disabled>Button</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>
>
>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="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;
}
/*#noVNC_control_bar {
  display: contents;
}*/
</style>
<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" checked>2</label>
input[type=checkbox]:disabled
<label><input type="checkbox" disabled>1</label>
<label><input type="checkbox" checked disabled>2</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" checked>1</label>
<label><input type="radio" name="1">2</label>
input[type=radio]:disabled
<label><input type="radio" name="2" disabled>1</label>
<label><input type="radio" name="2" checked disabled>2</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:disabled
<button type="reset" disabled>Reset</button>
<hr>

button[type=button]
<button type="button">Button</button>
button:disabled
<button type="button" disabled>Button</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>

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