设置readonly样式选择器方法

要给 readonly 属性的 input 元素设置样式，你可以使用以下几种 CSS 选择器方法：

1. 属性选择器（推荐）

input[readonly] {
  /* 你的样式 */
  background-color: #f0f0f0;
  border: 1px solid #ccc;
  color: #555;
}

2. 使用 :read-only 伪类（注意浏览器兼容性）

input:read-only {
  /* 你的样式 */
  background-color: #f0f0f0;
}

3. 如果需要更具体的选择，可以结合类名或ID

/* 选择具有readonly属性且类名为my-input的元素 */
input.my-input[readonly] {
  /* 你的样式 */
}

/* 选择具有readonly属性且ID为myInput的元素 */
input#myInput[readonly] {
  /* 你的样式 */
}

注意事项：

1. readonly 属性不需要值（在HTML5中），所以 input[readonly="readonly"] 和 input[readonly] 效果相同
2. :read-only 伪类的浏览器支持较好，但不如属性选择器通用
3. 如果你想区分 readonly 和 disabled，可以分别设置样式：

input[readonly] { /* readonly样式 */ }
input:disabled { /* disabled样式 */ }

示例：

<input type="text" readonly value="只读内容">

input[readonly] {
  background-color: #f5f5f5;
  border: 1px dashed #999;
  color: #666;
  cursor: not-allowed;
}