我得到了这个 Vue 组件(https://www.vue2editor.com):
<vue-editor id="description" name="description"
:class="{'uk-form-danger': errors.has('description') }"
v-model="description"
:editorToolbar="customToolbar" v-validate="'required'">
</vue-editor>
呈现以下 HTML 标记:
<div class="quillWrapper" name="description" aria-required="true" aria-invalid="false">
<div class="ql-toolbar ql-snow"><span class="ql-formats"></span></div>
<div id="description" class="ql-container ql-snow">
<div class="ql-editor ql-blank" data-gramm="false" contenteditable="true"><p><br></p></div>
<div class="ql-clipboard" contenteditable="true" tabindex="-1"></div>
<div class="ql-tooltip ql-hidden"><a class="ql-preview" target="_blank" href="about:blank"></a>
<input
type="text" data-formula="e=mc^2" data-link="https://quilljs.com" data-video="Embed URL">
<a
class="ql-action"></a><a class="ql-remove"></a></div>
</div>
</div>
现在我想将类 uk-form-danger
(比较 https://getuikit.com/docs/form#states-modifiers )添加到父 div。
如您所见,我是通过在出错时绑定(bind)类来做到这一点的。
嗯。问题是:uk-form-danger
类没有向文本编辑器添加红色边框颜色。
这些是 .ql-toolbar.ql-snow
的 css:
.ql-toolbar.ql-snow {
border: 1px solid #ccc;
-webkit-box-sizing: border-box;
box-sizing: border-box;
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
padding: 8px;
这是 uk-form-danger 的 css:
*
* Error
*/
.uk-form-danger,
.uk-form-danger:focus {
color: #f0506e;
border-color: #f0506e;
}
我可以通过向我的元素添加自定义 scss 来编辑 css - 但我应该在那里添加什么?
感谢您的支持:-)
最佳答案
这里的问题与 CSS 特异性有关——.ql-toolbar.ql-snow
是一个比 .uk- 更“强大”的选择器形式危险
类。
自定义 SCSS 的最快修复方法是将 !important;
属性添加到错误样式中,因此您的自定义代码可能如下所示:
.uk-form-danger {
border-color: #f0506e !important;
}
关于css - 更改另一个 div div 内的 div 的边框颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53308599/