I can not hide an element with css by taking the data-column attribute

Question

Navigation

#1 by (10 votes)

3

I have an input with the code below:

<input type="search" class="filtro tablesorter-filter" placeholder="" data-column="1">

I'm using a css page to try to hide it:

<style> input[data-column=1] { display:none } </style>

But the element continues to be displayed on the screen.

When I put it this way it works normally, but there is more than one and the only filter would be just the data-column:

<style> input[type=search] { display:none } </style>

Am I doing something wrong? Is this attribute not being html default mapped by CSS?

NOTE: I tried to use this seletor { input[data-column=1] } with JQuery, but I did not succeed either.

html jquery css

asked by anonymous 18.12.2013 / 19:42

1 answer

score 10 · Accepted Answer

You have to put the value of the attribute in quotation marks, like this:

<style> input[data-column="1"] { display: none } </style>

But this type of selector does not work in IE8, you can do this via jQuery:

$('input[data-column="1"]').css('display', 'none');