How to remove the border of the CKEditor 5 text field?

Question

Hi!

Please help me solve a seemingly simple question. I have not found a solution to this problem. I tried using CSS and just changing the parameters - it doesn't work. I just need to remove or hide the border of the CKEditor 5 text box. How can I do this?

I asked a question here, but it looks like I will wait for the answer there until the second coming of Christ: how-to-remove-the-border-of-the-ckeditor-5-text-field

Thank you!

<textarea id="editor"><p>Text</p></textarea>  
  
ClassicEditor  
        .create( document.querySelector( '#editor'), {  
        } )  
        .then( editor => {  
            const toolbarElement = editor.ui.view.toolbar.element;                  
            toolbarElement.style.display = 'none';  
            editor.enableReadOnlyMode( 'my-feature-id' );  
        } )  
        .catch( err => {  
            console.error( err.stack );  
        } );  

Answer 1

Hi,@Volk Volk,
You can add this code in the View:

<style>  
    .ck.ck-editor__main>.ck-editor__editable:not(.ck-focused) {  
        border:0px !important;  
    }  
</style>  

Then the border will be removed.

-----------------------------------------------------------------------------------------------------

If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

Best regards,
Xinran Shen

Answer 2

Excellent! It works! Thank you a lot! :)