Video.js改变焦点样式

Question

我正在使用video .js与Vue.js和electronic .js一起使用，我试图将视频播放器的轮廓改为比标准黄色轮廓更好看的东西，但轮廓只是保持原样。
My Video Component:

<template>
<div id="video-container">
<video class="video-js" id="video-player" ref="video"></video>
</div>
</template>
<script>
import videojs from "video.js";
export default {
name: "Preferences",
props: ["item"],
methods: {
getPath: function () {
return this.item.dir + "/" + this.item.name + "." + this.item.fileType;
},
},
mounted: function () {
let options = {
autoplay: false,
controls: true,
fluid: true,
playbackRates: [0.5, 1, 1.25, 1.5, 1.75, 2],
controlBar: {
pictureInPictureToggle: false,
},
};
this.player = videojs(this.$refs.video, options).src(this.getPath());
},
};
</script>
<style scoped>
#video-player {
outline: none;
}
</style>

我也尝试了!important,#video-player:hover和使用视频容器div来改变轮廓，但到目前为止没有任何工作。
视频框轮廓
按钮轮廓

Answer 1

如果我没理解错的话，你说的是浏览器焦点，就是焦点组件周围的那条蓝线。

你需要像

这样的东西

.video-js:focus {
outline-style: none;
}

如果仍然不工作，你可以添加!important或添加这个也

.video-js:focus {
outline-style: none;
box-shadow: none;
border-color: transparent;
}

通常我们不会删除它，原因很简单，可能很难在组件周围使用Tab。但如果你觉得没问题，那就去做吧!

编辑(10/02/2021):

所以对于视频JS，你可以使用你的自定义类并覆盖video - JS CSS类，为了做到这一点，你需要在你的CSS中创建这3个跟随类。

.vjs-matrix.video-js {
color: #00ff00;
/*put other stuff you need here*/
}
/* Change the border of the big play button. */
.vjs-matrix .vjs-big-play-button {
border-color: #00ff00;
/*put other stuff you need here*/
}
/* Change the color of various "bars". */
.vjs-matrix .vjs-volume-level,
.vjs-matrix .vjs-play-progress,
.vjs-matrix .vjs-slider-bar {
background: #00ff00;
/*put other stuff you need here*/
}

HTML

<video class="vjs-matrix video-js">...</video>

试着玩这个，看看是否解决你的问题!

源(videojs)