How to style a checkbox input?

Question

I’m creating multiple selections with the checkbox and need to leave it with the following characteristics:

• Transparent background
• Stylize the edges
• Remove the Check

This so that it is on top of my . card and the user thinks he is clicking on a card, when in fact it is a checkbox and is activating or disabling that option.

I tried to edit with the properties of them and nothing happens, follow the code:

<div class="form-group col-3 mt-2">
    <label for="exampleInputPassword1" class="font-weight-bold ml-1">Selecione seus Títulos Acadêmicos</label>
    <div class="d-flex">
        <div class="position-absolute mt-2 ml-1"
            style="width: 15rem; height: 11.6rem; border: 1px red solid; z-index: 1 !important">
            <input type="checkbox" aria-label="Checkbox for following text input"
                style="background-color: transparent !important; width: 100% !important; height: 100% !important;">
        </div>
        <div class="position-relative" style="z-index: 0 !important">
            <div class="card py-2 pb-4 mt-2 ml-1" style="width: 15rem">
                <div class="card-header pb-0 border-0 bg-transparent text-center">
                    <h5 class="card-title">Pós Graduação</h5>
                </div>
                <div class="card-body text-center">
                    <i class="fas fa-graduation-cap" style="font-size: 4rem"></i>
                </div>
            </div>
        </div>
    </div>
</div>

Illustrative Figure:

Answer 1

Young first creates a input:checkbox and puts in it the class sr-only, this class is original to BS4 and serves to make the element only visible to Screenreaders

Then in your CSS you create a rule for when this checkbox have been :checked it will put a class in the element that comes under it, in case the .card. Would look like this: #meubtn:checked+label>.card { }

Now wrap your card with a <label> with class .none, I created this class to try to clear qq style default that Bootstrap may have defaulted to labels. That one label will have a for="" for the input:checkbox sr-only that will enable CSS style when you are :checked

Follow the image code above. No JS here is only CSS.

#meubtn:checked+label>.card {
  background-color: red;
}
label.none {
  all: unset !important;
}

<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.0/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" media="screen" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" />
  
<div class="form-group col-3 mt-2">
  <label for="exampleInputPassword1" class="font-weight-bold ml-1">Selecione seus Títulos Acadêmicos</label>
  <div class="d-flex">
    <input type="checkbox" id="meubtn" class="sr-only">
    <label for="meubtn" class="none">
      <div class="card py-2 pb-4 mt-2 ml-1" style="width: 15rem">
        <div class="card-header pb-0 border-0 bg-transparent text-center">
          <h5 class="card-title">Pós Graduação</h5>
        </div>
        <div class="card-body text-center">
          <i class="fas fa-graduation-cap" style="font-size: 4rem"></i>
        </div>
      </div>
    </label>
  </div>
</div>