如何修改JQuery Terminal失去焦点时的光标样式？

一、CSS直接实现（推荐） #

你思路方向是对的，但需要把选择器定位到光标元素本身——jQuery Terminal的光标是.cmd容器下的.cursor类元素。通过CSS伪类:not(:focus)配合光标选择器，就能直接把失焦时的光标改成空心方框：

/* 失焦状态下的光标样式 */
.cmd:not(:focus) .cursor {
    background-color: transparent !important; /* 清除默认的实心背景 */
    border: 2px solid currentColor; /* 用当前文字颜色绘制边框，保持风格统一 */
    width: 0.8em; /* 调整光标宽度 */
    height: 1.2em; /* 调整光标高度 */
    /* 如需旋转光标，可添加如下样式（按需启用） */
    /* transform: rotate(45deg); */
    /* transform-origin: center center; */
}

说明：currentColor会自动继承终端文字的颜色，不需要手动指定；!important用来覆盖终端默认的光标背景样式，如果你的自定义样式优先级足够，也可以去掉。

二、JS事件监听方案（复杂场景用） #

如果需要结合更多逻辑调整光标样式，可以在初始化Terminal时利用onBlur和onFocus回调：

// 初始化终端时配置事件
$('#terminal').terminal(function(command) {
    // 这里是你的终端命令处理逻辑
}, {
    onBlur: function() {
        // 失焦时给光标添加自定义类
        this.find('.cursor').addClass('blur-cursor');
    },
    onFocus: function() {
        // 聚焦时移除自定义类，恢复默认样式
        this.find('.cursor').removeClass('blur-cursor');
    }
});

对应的CSS样式：

.blur-cursor {
    background-color: transparent;
    border: 2px solid currentColor;
    width: 0.8em;
    height: 1.2em;
}

三、光标属性调整说明 #

• 宽度/高度：直接通过CSS的width和height属性设置，单位用em可以适配终端字体大小；
• 旋转：添加transform: rotate(角度)，比如rotate(90deg)，同时用transform-origin设置旋转中心（默认是元素中心，一般无需修改）；
• 颜色：修改border-color即可，用currentColor能保持和终端文字颜色一致。

内容的提问来源于stack exchange，提问作者NotHim