input标签css样式
时间: 2023-07-23 12:04:45 浏览: 48
下面是一个基本的 input 标签的 CSS 样式示例:
```css
input {
/* 设置边框样式 */
border: 1px solid #ddd;
/* 设置圆角 */
border-radius: 4px;
/* 设置内边距 */
padding: 8px;
/* 设置字体大小 */
font-size: 16px;
/* 设置宽度 */
width: 300px;
/* 设置高度 */
height: 40px;
/* 设置背景颜色 */
background-color: #fff;
/* 设置文本颜色 */
color: #333;
/* 设置光标样式 */
cursor: text;
}
```
你可以根据自己的需要,调整这些样式属性。
相关问题
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>