Hide checkbox using 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.

You are trying to apply css to name attribute instead use class or id — CyberAbhay
– CyberAbhay, Commented May 24, 2017 at 4:50
Do you need to hide this one checkbox only or all of them ? Do you have to use CSS only or JS is fine as well ? — j-printemps
– j-printemps, Commented May 24, 2017 at 5:16
@j-printemps I need to hide this checkbox only by using CSS. — Brian Cheong
– Brian Cheong, Commented May 24, 2017 at 5:46

Abraham Murciano Benzadon · Accepted Answer · 2017-05-24 01:26:00Z

2

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;
}

answered May 24, 2017 at 1:26

Abraham Murciano Benzadon

1,75219 silver badges36 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Abraham Murciano Benzadon Over a year ago

Try without the [type=checkbox]. If that works, I'll update the answer

Abraham Murciano Benzadon Over a year ago

Also, does it work with just input[type=checkbox]? That should hide all checkboxes, but try it just for testing

Brian Cheong Over a year ago

sorry your solution is working. I made a mistake without clear cache and cookie.

Abraham Murciano Benzadon Over a year ago

You know that you don't need to clear cache every time you make any changes to your website. You can just do a hard reload which will fetch all files from source (not cache) which is ctrl+shift+R on chrome

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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>

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered May 24, 2017 at 2:24

zer00ne

45.2k6 gold badges50 silver badges82 bronze badges

1 Comment

Brian Cheong Over a year ago

Hi @zer00ne, the <td> is inside the <tr> and also the <table>. I have edited in my post. Thanks.

Collectives™ on Stack Overflow

Hide checkbox using css

2 Answers 2

4 Comments

Demo

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Demo

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related