设置 input 标签只读样式
时间: 2023-05-26 19:06:06 浏览: 318
可以通过设置 input 标签的属性 readonly="true" 或者设置 disabled="true" 来设置只读样式。
例如:
```html
<input type="text" value="只读文本" readonly="true">
<input type="text" value="只读文本" disabled="true">
```
其中 readonly 属性表示该输入框只读,无法编辑,但是可以选择、复制、粘贴等操作。disabled 属性表示该输入框被禁用,不可编辑,也无法进行其他操作。两者的区别在于只读输入框可以被提交,而禁用输入框不会被提交。
相关问题
input 标签只读样式
可以使用 CSS 的属性 `pointer-events` 和 `background-color` 来实现 `input` 标签只读样式,具体如下:
```css
input[readonly] {
pointer-events: none;
background-color: #f7f7f7;
}
```
解释:
- `input[readonly]` 表示选中所有 `input` 标签中 `readonly` 属性存在的元素
- `pointer-events: none;` 表示禁用鼠标事件,即不允许用户点击或选择输入框
- `background-color: #f7f7f7;` 表示设置背景颜色为灰色,使用户可以区分出只读和可编辑状态的输入框
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>