CSS selector based on textbox value

Question

I have an environment which supports CSS / bootstrap 3.2, - but NO javascript. I am trying to implement a list filtering solution using pure CSS selector + HTML.

Suppose, I have 2 items in an HTML list element. I want to show only the ones matching the text entered in the input element.

<form>
  <ul>
    <li class ="c1">c1</li>
    <li class="c2">c2</li>
  </ul>

  <input type="text">
</form>

if I type c1 in textbox, that should show only the first item.Is this even possible using pure css, no JS?

bootstrap includes (bootstrap.css, bootstrap.js).. if you are using bootstrap.js then definitely it supports javascript. There is no event handling in css. — Biswajit Nath, Jan 16 '19 at 07:19
@zingh your needed an event text change but DOM does not provide instant this, it's possible to use javascript, not possible only CSS + HTML — Md. Abu Sayed, Jan 16 '19 at 09:22

score 9 · Answer 1 · answered Jan 16 '19 at 07:17

9

This is impossible.

CSS has no means to act based on the current value of an input
CSS has no means to select an element based on something that follows it in the DOM

answered Jan 16 '19 at 07:17

Quentin

914,110
126
1,211
1,335

I was wondering if there are more tricks on the lines of the checkbox hack.. it can effectively control style based on checkbox state.. all in CSS. see https://css-tricks.com/the-checkbox-hack/ – zingh Jan 16 '19 at 17:14

CSS selector based on textbox value

1 Answers1