About code boxes

Forum version : #ModernBB
Position : Founder
Concerned browser(s) : Google Chrome
Who the problem concerns : Yourself
Forum link :https://ekin-ek.666forum.com
- - - - - - - -
Hello!

I changed my code box style,and found small problems.
I don't want gray blocks.
And 【< >】appearing on the far right, some words that block the top.



I want to be able to be clean like the picture (no overlap)



And My code

In CSS：

Code:

/* codebox 代碼框 */
.codebox dd {
  background-color: #cdfaf5;
  border-radius: 3px;
}
.codebox dt {
  background-color: #73d9ce;
  border-radius: 3px;
}
.selectCode { float:right; text-transform: uppercase; cursor:pointer;
}
div.cont_code { clear: right;
}

In Javascript ( In all the pages)：

Code:

function selectCode(e) {
        var doc = document
            , text = $(e).closest("dl").find(".cont_code,code").get(0)
            , range, selection
        ;
        if (doc.body.createTextRange) {
            range = document.body.createTextRange();
            range.moveToElementText(text);
            range.select();
        } else if (window.getSelection) {
            selection = window.getSelection();       
            range = document.createRange();
            range.selectNodeContents(text);
            selection.removeAllRanges();
            selection.addRange(range);
        }
    };
    $(function(){$("dl.codebox:not(.spoiler,.hidecode)  > dd.code, dl.codebox:not(.spoiler,.hidecode)  > dd > code").closest("dl").find('dt').append('<span onClick="selectCode(this)" class="selectCode">選擇內容</span>')});

Thanks in advance for your help!

Good afternoon!

AP - Display - Colors&CSS - Stylesheet CSS

Try this code:

Code:

dl.codebox {
  background-color: transparent;
  border-color: transparent;
}

dl.codebox:before {
  display: none;
}

Result:

thank you @Razor12345

oh yes it works!it gets very clean!



Thank you very much!

Thank you for your help @Razor12345

Problem solved & topic archived. Please read our forum rules: ESF General Rules