Toggle switch css issue-CodePudding

I was using a toggle switch in my code it was working well.

I change some stuff in my project and now, two arrrows and a white vertical line appears on my switch and I don't understand why and where it comes from :(

There, a picture :

my toggle switch

My code :

function Dashboard() {
    return (
      <>
         <label className="switch">
            <input type="checkbox"/>
            <span className="slider round"></span>
          </label>
      </>
    );
}

I used this page for css : https://www.w3schools.com/howto/howto_css_switch.asp

CodePudding user response：

You can use this pseudo class Reference!

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type=number] {
  -moz-appearance: textfield;
}

CodePudding user response：

I tried and it didn't work, but i found a way :).

Like :

  .switch::before { display: none; }
  .switch::after { display: none; }

Thank you for your help