css的input怎么只读
时间: 2024-02-15 17:02:17 浏览: 13
要使HTML表单中的input元素只读,可以将其“readonly”属性设置为“true”。例如,在CSS中,可以这样设置一个input元素只读:
```css
input[readonly] {
background-color: #eee;
}
```
这将使所有只读的input元素的背景色变为灰色。如果要将特定类型的input元素设置为只读,可以使用以下类似的CSS选择器:
```css
input[type="text"][readonly] {
background-color: #eee;
}
```
这将使所有类型为“text”的只读input元素的背景色变为灰色。
相关问题
css设置input只读
可以使用 CSS 的属性 `pointer-events` 来设置 input 元素只读,如下所示:
```css
input[readonly] {
pointer-events: none;
}
```
这将使只读的 input 元素无法接收鼠标或触摸事件,从而防止用户编辑其内容。可以将 `readonly` 属性添加到 input 元素中来使其成为只读。例如:
```html
<input type="text" value="只读文本" readonly>
```
css input标签禁止输入
要实现CSS中input标签的禁止输入,可以使用以下CSS样式:
```css
input {
user-select: none; /* 禁止选择文本 */
-webkit-user-drag: none; /* 禁止拖拽元素 */
-webkit-user-modify: read-only; /* 将输入框设置为只读 */
}
```
通过设置`user-select`属性为`none`,可以禁止用户选择文本。通过设置`-webkit-user-drag`属性为`none`,可以禁止元素拖拽。通过设置`-webkit-user-modify`属性为`read-only`,可以将输入框设置为只读。这样就可以实现禁止输入的效果。
另外一种方法是通过JavaScript,在input标签聚焦时立即让其失去焦点,从而规避光标显示。可以使用以下代码实现:
```javascript
$('input<span class="em">1</span><span class="em">2</span><span class="em">3</span><span class="em">4</span>