m0a
m0a

Reputation: 1005

Possible to target an element by its value in CSS?

Here's what I have in my JS:

if ($('#submit').attr('value') == 'Save Changes'){
    $('#submit').hide();
};

Is there a way to target an element by its Value in CSS, and then hide it if its value == something?

If not- Is there a way to make this code faster? I can see the Hide happening when I load the page.

Upvotes: 0

Views: 54

Answers (2)

Kavian Rabbani
Kavian Rabbani

Reputation: 984

you can use attribute selector and change the logic to prevent flashing:

#submit {
  display: none;
}

#submit:not([value="Save Changes"]) {
  display: block;
}

Upvotes: 2

gavgrif
gavgrif

Reputation: 15499

To prevent the flash of the item before hiding - the best way is to flip the logic - start with it hidden and then show it if needed

// css
#submit {display: none};

// js
if ($('#submit').attr('value') !== 'Save Changes'){
    $('#submit').show();
};

Upvotes: 3

Related Questions