Hide checkbox using css - css

Question

I have the code, which I get it from inspecting:
<td class=ox-list-pair style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">
</td>
I have tried to hide the checkbox but none of them success.
My attempts:
input[type=checkbox].ox_CkSurvey_Sport__xava_selected {
display: none;
}
ox_CkSurvey_Sport__xava_selected {
display: none;
}
.ox_CkSurvey_Sport__xava_selected input[type="checkbox"]{
display:none;
}
Please note that <td> is valid as it is inside <tr> as well as <table>.
Please help me. Thanks.

Answer 1

You should read up on CSS selectors.
https://www.w3schools.com/cssref/css_selectors.asp
You are trying to hide the check box with the class "ox_CkSurvey_Sport__xava_selected", but that doesn't exist.
You need to do this:
input[type=checkbox][name=ox_CkSurvey_Sport__xava_selected] {
display: none;
}

Answer 2

Is your <td> valid? What makes a <td> valid is:
It must be in a <tr>
That <tr> must be in a <table>
Technically <tr> must be in a <tbody>, <thead>, or <tfoot> but the browser will create a <tbody> by default if there's a <table>.
In the demo there's:
a <table>, <tr>, <td>, and your messy checkbox.
a <td> and a simple checkbox.
Note: The selector is td.ox-list-pair > input[type="checkbox"] and it successfully hides the messy checkbox and fails to hide the simple checkbox. So as you can see that the browser will ignore an invalid <td> and everything within it. I'm going out on a limb and assume that your <td> is not inside a <tr> and/or <table>.
Demo
$('td.ox-list-pair > input[type="checkbox"]').css('display', 'none');
b {
color: red
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tr>
<td class='ox-list-pair' style>
<input type="CHECKBOX" name="ox_CkSurvey_Sport__xava_selected" value="selected:0" onclick="openxava.onSelectElement('CkSurvey','Sport','null','row=0,viewObject=xava_view',this.checked,'ox_CkSurvey_Sport__0',false,'','border-bottom: 1px solid;','',false,false,0,'xava_tab')">I'm
in a valid cell
</td>
</tr>
</table>
<td class='ox-list-pair'>
<input type="CHECKBOX">I'm in an <b>invalid</b> cell
</td>