Notes on CSS and HTML

I'm really intrigued by how simple but functional css/html can be. If I can find commonly found, reactive features available in pure css/html, I'll place them here. Also a few failed efforts.

Pure CSS Search

1. Matching on value attribute from <input/>

• attempt to narrow a list of items by autocomplete searching and using attribute selectors (likely input[value~=""]

• content can move from CSS to HTML just not from HTML to CSS as it was removed from the spec. it's also ironically placed under section 6.6.6.

• value=""'s are added to inputs within react and other frontend frameworks, so the ability to match on an updated value attribute is lost. I originally thought this was inherent in html input elements

  • Side note, CSS keyloggers rely on javascript and technically do not work in non-javascript environments

• note that <details> toggles an open attribute on the element when clicked. If an html element would allow content to be added on a mouse down, you could set an input tags value without javascript, or just remove all but the selected

2. Using the content of a <div contenteditable="true" />

• still not an attribute, content is still not selectable even if editable
• the answer might be found with other global attributes

3. Using <datalist> to autocomplete <options/> on an <input/>

• the killer here is really the same as above. You can autocomplete and technically sub-string 'search' terms based on the native implementation of an <inputs list="whatever"/>
• the problem is after you select an option, no attribute is set in the html.
• further more, you cannot style or manipulate options you've created for the dataset in the actual options list because the functionality is handled natively. I attempted setting <dataset style="position: absolute;"/> and was hoping the static list (assuming it was the same when auto-completing) would start to disappear

4. Form submit allowing autocompleted value to be submitted as the slug

• we can substring search the <options />, but we can't reduce the list of options after search. Fine.
• can we at least utilize the search result with a form?
• it's either a query param or a POST that has a body

5. Submit query params and pull them into css

• It's not really possible, but i'd have to whole css file for each matching 'thing'

5. (Cheat) Have an expandable, hoverable A-Z list that will collapse the options based on first letter

• it's not search, but it will serve the same function
• allow letters active and search in an order

Resources

• 3D Models in CSS
• 20+ impressive CSS Only projects
• Very ready to give up, found someone thinking about search in css back in 2013

Content Toggles

<details>
  <summary>Content Toggles</summary>
  <p>this details tag and some other content</p>
</details>