:read-only

Baseline Widely available

This feature is well established and works across many devices and browser versions. Itâs been available across browsers since â¨2020å¹´7æâ©.

:read-only ã¯ CSS ã®æ¬ä¼¼ã¯ã©ã¹ã§ãã¦ã¼ã¶ã¼ãç·¨éã§ããªãè¦ç´ (input ã textarea ãªã©) ãè¡¨ãã¾ãã

css

input:read-only,
textarea:read-only {
  background-color: #ccc;
}

p:read-only {
  background-color: #ccc;
}

è©¦ãã¦ã¿ã¾ããã

label,
input[type="submit"] {
  display: block;
  margin-top: 1em;
}

*:read-only {
  font-weight: bold;
  color: indigo;
}

<p>Please fill your details:</p>

<form>
  <label for="email">Email Address:</label>
  <input id="email" name="email" type="email" value="test@example.com" />

  <label for="note">Short note about yourself:</label>
  <textarea id="note" name="note">Don't be shy</textarea>

  <label for="pic">Your picture:</label>
  <input id="pic" name="pic" type="file" />

  <input type="submit" value="Submit form" />
</form>

æ§æ

:read-only

css

input:-moz-read-only,
textarea:-moz-read-only,
input:read-only,
textarea:read-only {
  border: 0;
  box-shadow: none;
  background-color: white;
}

textarea:-moz-read-write,
textarea:read-write {
  box-shadow: inset 1px 1px 3px #ccc;
  border-radius: 5px;
}

å®å¨ãªã½ã¼ã¹ã³ã¼ãã¯ readonly-confirmation.html ã«ããã¾ããä»¥ä¸ã®ããã«è¡¨ç¤ºããã¾ãã

ãã©ã¼ã ä»¥å¤ã®èªã¿åãå°ç¨ã³ã³ããã¼ã«ã®ã¹ã¿ã¤ã«ä»ã

ãã®ã»ã¬ã¯ã¿ã¼ã¯ <input>/<textarea> è¦ç´ ã« readonly ãè¨å®ããã¦ãããã®ã ããé¸æããã®ã§ã¯ããã¾ãããã¦ã¼ã¶ã¼ãç·¨éã§ããªãããããè¦ç´ ãé¸æãã¾ãã

html

<p contenteditable>ãã®æ®µè½ã¯ç·¨éå¯è½ã§ããèªã¿æ¸ãå¯ã§ãã</p>

<p>ãã®æ®µè½ã¯ç·¨éã§ãã¾ãããèªã¿åãå°ç¨ã§ãã</p>

css

p {
  font-size: 150%;
  padding: 5px;
  border-radius: 5px;
}

p:read-only {
  background-color: red;
  color: white;
}

p:read-write {
  background-color: lime;
}