uni-app input caret-color 光标颜色 二次失效

uni-app input caret-color 光标颜色 二次失效

产品分类：

uniapp/App

PC开发环境操作系统：

Windows

PC开发环境操作系统版本号：

win10

HBuilderX类型：

正式

HBuilderX版本号：

3.1.4

手机系统：

iOS

手机系统版本号：

IOS 14

手机厂商：

苹果

手机机型：

iphone x

页面类型：

vue

打包方式：

云端

项目创建方式：

HBuilderX

示例代码：

<template>  
    <view class="all">  
        <view class="input-box">  
            <view class="input-box" >  
                <!-- type="text" 失效 -->  
                <input type="text" :password="false"  placeholder="请输入邮箱号"/>
            </view>  
        </view>  
    </view>   
</template>  

<style lang="scss" scoped>  
    .all{  
        width: 100vw;  
        height: 100vh;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
    }  
    .input-box{  
        width: 614rpx;  
        height: 124rpx;  
        background-color: #189EB9;  
        input{  
            width: 486rpx;  
            min-height: 32rpx;  
            height: 48rpx;  
            font-size: 40rpx;  
            font-weight: 500;  
            color: #FFFFFF;  
            caret-color: #32C56A;  
            margin-bottom: 28rpx;  
        }  
    }  
</style>

操作步骤：

<template>  
    <view class="all">  
        <view class="input-box">  
            <view class="input-box" >  
                <!-- type="text" 失效 -->  
                <input type="text" :password="false"  placeholder="请输入邮箱号"/>
            </view>  
        </view>  
    </view>   
</template>  

<style lang="scss" scoped>  
    .all{  
        width: 100vw;  
        height: 100vh;  
        display: flex;  
        align-items: center;  
        justify-content: center;  
    }  
    .input-box{  
        width: 614rpx;  
        height: 124rpx;  
        background-color: #189EB9;  
        input{  
            width: 486rpx;  
            min-height: 32rpx;  
            height: 48rpx;  
            font-size: 40rpx;  
            font-weight: 500;  
            color: #FFFFFF;  
            caret-color: #32C56A;  
            margin-bottom: 28rpx;  
        }  
    }  
</style>

预期结果：

光标颜色对

实际结果：

光标颜色不对

bug描述：

type="text" 光标颜色 第一次聚焦时好用 再次聚焦时颜色不对了  type="password" 一直正常

更多关于uni-app input caret-color 光标颜色 二次失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

5 回复

问题排查中，已加分，感谢您的反馈！

更多关于uni-app input caret-color 光标颜色 二次失效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


希望尽快解决. 另外input标签的cursor光标能不能修改样式, 比如下划线,粗体之类的.?

请问这个问题修复没有？我这边也是这个问题，点一下变一下颜色

同问这个问题有解决方案吗，我这边目前是ios 12promax会有这个问题

这是一个已知的 iOS 平台兼容性问题。在 uni-app 中，iOS 系统对 caret-color 属性的支持存在限制，特别是在多次聚焦时可能出现失效。

解决方案：

  1. 使用全局样式覆盖：
input {
  caret-color: #32C56A !important;
}
  1. 添加动态类名：
<input :class="{ 'custom-caret': true }" />
<style>
.custom-caret {
  caret-color: #32C56A !important;
}
</style>
  1. 针对 iOS 的特定处理：
/* 针对 iOS 的特定样式 */
[@media](/user/media) screen and (-webkit-min-device-pixel-ratio:0) {
  input {
    caret-color: #32C56A !important;
  }
}
回到顶部