css. input激活不显示光标
时间: 2023-08-06 22:01:45 浏览: 82
可能是你的CSS样式问题。你可以在你的CSS样式中添加以下代码:
```
input:focus {
outline: none;
}
```
这会禁用input激活时的默认outline,并使光标可见。如果这个方法不起作用,你可以尝试添加以下代码:
```
input[type="text"], input[type="password"], textarea {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid #ccc;
padding: 5px 10px;
font-size: 16px;
}
input[type="text"]:focus, input[type="password"]:focus, textarea:focus {
outline: none;
border: 1px solid #007bff;
}
```
这应该解决你的问题。
相关问题
css 设置input 光标粗细
在 CSS 中可以使用 "caret-color" 属性来设置 input 光标的颜色。如果要设置光标粗细,可以使用 "border" 属性来实现。
例如:
```css
input {
caret-color: red;
border: 2px solid blue;
}
```
这样设置后,光标的颜色是红色,粗细是 2px,边框颜色是蓝色。
注意:
- 浏览器的兼容性不同,可能需要使用前缀来兼容低版本浏览器.
- 如果你想让输入框本身也有边框,可以使用box-sizing: border-box;来实现
- 如果你想改变光标的形状,可以使用cursor属性来实现。
css input 光标宽度
CSS 中控制输入框(input)光标宽度的属性是 `caret-color`。这个属性不仅可以控制光标的颜色,还可以控制光标的宽度。光标的宽度可以是一个具体的长度值,也可以是一个相对于字体大小的百分比值。例如:
```
input {
caret-color: red;
/* 设置光标宽度为字体大小的 50% */
caret-width: 0.5em;
}
```
需要注意的是,`caret-color` 和 `caret-width` 这两个属性目前还不是所有浏览器都支持。在一些旧版本的浏览器中可能无法正常显示。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)