164 lines
5.6 KiB
HTML
164 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html>
|
|
<head>
|
|
<style>
|
|
div {
|
|
float: left;
|
|
border: 1px solid red;
|
|
}
|
|
input {
|
|
background-color: white;
|
|
color: black;
|
|
}
|
|
input:read-only {
|
|
background-color: lime;
|
|
}
|
|
input:read-write {
|
|
color: red;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<p>Test the basic styling of the <input> types with the selectors :read-only and :read-write.</p>
|
|
<div>
|
|
<input type="hidden" value="hidden">
|
|
<input type="hidden" value="hidden" readonly>
|
|
<input type="hidden" value="hidden" disabled>
|
|
<input type="hidden" value="hidden" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="text" value="text">
|
|
<input type="text" value="text" readonly>
|
|
<input type="text" value="text" disabled>
|
|
<input type="text" value="text" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="search" value="search">
|
|
<input type="search" value="search" readonly>
|
|
<input type="search" value="search" disabled>
|
|
<input type="search" value="search" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="tel" value="tel">
|
|
<input type="tel" value="tel" readonly>
|
|
<input type="tel" value="tel" disabled>
|
|
<input type="tel" value="tel" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="url" value="url">
|
|
<input type="url" value="url" readonly>
|
|
<input type="url" value="url" disabled>
|
|
<input type="url" value="url" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="email" value="email">
|
|
<input type="email" value="email" readonly>
|
|
<input type="email" value="email" disabled>
|
|
<input type="email" value="email" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="password" value="password">
|
|
<input type="password" value="password" readonly>
|
|
<input type="password" value="password" disabled>
|
|
<input type="password" value="password" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="datetime" value="datetime">
|
|
<input type="datetime" value="datetime" readonly>
|
|
<input type="datetime" value="datetime" disabled>
|
|
<input type="datetime" value="datetime" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="date" value="date">
|
|
<input type="date" value="date" readonly>
|
|
<input type="date" value="date" disabled>
|
|
<input type="date" value="date" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="month" value="month">
|
|
<input type="month" value="month" readonly>
|
|
<input type="month" value="month" disabled>
|
|
<input type="month" value="month" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="week" value="week">
|
|
<input type="week" value="week" readonly>
|
|
<input type="week" value="week" disabled>
|
|
<input type="week" value="week" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="time" value="time">
|
|
<input type="time" value="time" readonly>
|
|
<input type="time" value="time" disabled>
|
|
<input type="time" value="time" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="datetime-local" value="datetime-local">
|
|
<input type="datetime-local" value="datetime-local" readonly>
|
|
<input type="datetime-local" value="datetime-local" disabled>
|
|
<input type="datetime-local" value="datetime-local" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="number" value="number">
|
|
<input type="number" value="number" readonly>
|
|
<input type="number" value="number" disabled>
|
|
<input type="number" value="number" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="range" value="range">
|
|
<input type="range" value="range" readonly>
|
|
<input type="range" value="range" disabled>
|
|
<input type="range" value="range" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="color" value="color">
|
|
<input type="color" value="color" readonly>
|
|
<input type="color" value="color" disabled>
|
|
<input type="color" value="color" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="checkbox" value="checkbox">
|
|
<input type="checkbox" value="checkbox" readonly>
|
|
<input type="checkbox" value="checkbox" disabled>
|
|
<input type="checkbox" value="checkbox" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="radio" value="radio">
|
|
<input type="radio" value="radio" readonly>
|
|
<input type="radio" value="radio" disabled>
|
|
<input type="radio" value="radio" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="file" value="file">
|
|
<input type="file" value="file" readonly>
|
|
<input type="file" value="file" disabled>
|
|
<input type="file" value="file" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="submit" value="submit">
|
|
<input type="submit" value="submit" readonly>
|
|
<input type="submit" value="submit" disabled>
|
|
<input type="submit" value="submit" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="image" value="image">
|
|
<input type="image" value="image" readonly>
|
|
<input type="image" value="image" disabled>
|
|
<input type="image" value="image" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="reset" value="reset">
|
|
<input type="reset" value="reset" readonly>
|
|
<input type="reset" value="reset" disabled>
|
|
<input type="reset" value="reset" readonly disabled>
|
|
</div>
|
|
<div>
|
|
<input type="button" value="button">
|
|
<input type="button" value="button" readonly>
|
|
<input type="button" value="button" disabled>
|
|
<input type="button" value="button" readonly disabled>
|
|
</div>
|
|
|
|
</body>
|
|
</html>
|