Can't remove italic text from collapsible content - html

Question

I don't even any experiencing programming, but I am trying to put together a FAQ section for our help site and I wanted to use collapsible sections for the Q&A. I made it mostly work as I wanted, however, there is one thing I can't change at all. I have looked around and could not find what is wrong with the code. Any help would be highly appreciated. I really never did this before, so a total newbie here x
The HTML code I am using is:
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</html>
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #7C5A0B;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
This is how the browsers displays it, the blue box text in Italic.
Update:
I am not sure if this is the way to post the resolution, but I finally figured it.
Under .lbl-toggle { instead of using text-transform: none !important; I used font-style: normal; !important . That did the trick! Thanks everyone!

Answer 1

Hello William,
Please give this code a try and let me know the outcome, buddy. I certainly hope this help you solving this issue, mate!
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
font-style: normal;
line-height: normal;
}
.lbl-toggle {
display: block;
text-transform: none !important;
font-style: normal !important;
text-align: left;
width: 100%;
font-family: arial, sans-serif;
font-size: 1.2rem;
font-style: normal;
padding: 0.6rem;
color: #ffff;
background: linear-gradient(to right, #00A9E0, #0085D5);
cursor: pointer;
border-radius: 5px 5px 0px 0px;
transition: all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #e3a514;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
font-style: normal !important;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.collapsible-content .content-inner {
background: linear-gradient(to right, #f7f7f7, #f5f5f5);
border-bottom: 1px solid rgba(250, 250, 250);
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
border-radius: 0px 0px 5px 5px;
font-family: arial, sans-serif;
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked+.lbl-toggle+.collapsible-content {
max-height: 100%;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
<html>
<head>
<title>No</title>
<link rel="stylesheet" type="text/css" href="https://content.ilabsolutions.com/wp-content/uploads/2020/05/gradifi.css" media="screen">
</head>
<body>
<div class="wrap-collabsible">
<input id="collapsible" class="toggle" type="checkbox" value="on">
<label class="lbl-toggle" for="collapsible">Question?</label>
<div class="collapsible-content">
<div class="content-inner">
<p>Answer.</p>
</div></div></div>
</body>
</html>