Hide nested button based on an inputs value

user_7471301 0
Viewed 186

I have a form with a button inside it which I need to hide.

  <form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit" class="btn btn-secondary" title="">Remove submission</button>
  </form>

There are multiple forms with the exact same values as the above, the only difference being the value="removesubmissionconfirm". Is it possible to hide the button based on that value using only css?

I've tried a lot of things and nothing seems to work.

TIA.

css html
3 Answers

You can do it using the attribute selector and the + selector :

input[value="removesubmissionconfirm"] + button {
  display: none;
}
<form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit" class="btn btn-secondary" title="">Remove submission</button>
  </form>

user_166888130

Generally no, but it may be in this specific example, considering the fact that the button comes directly after the hidden action field. Try this:

input[value="removesubmissionconfirm"] + button {
  display: none;
}
user_138306770 

input[value="removesubmissionconfirm"] + button {
  display: none;
}
 <form method="get">
          <input type="hidden" name="id" value="7245">
          <input type="hidden" name="action" value="removesubmissionconfirm">
      <button type="submit" class="btn btn-secondary" title="">Remove submission</button>
  </form>

user_93254700
Related