Getting input event functionality with less default-styled elements

Question

It's such an unnecessary detour to always style reset an input element when you only want the event functionality.

Is there any HTML element that offers events and as well allows me to styling-wise "start from scratch"?

Possible duplicate of [Use a DIV as an input](https://stackoverflow.com/questions/37667141/use-a-div-as-an-input) — Vitalii Chmovzh, Feb 11 '18 at 18:07
You can override defaults of your inputs.In theory also you can override all behaviors of your html elements as well as styling. — M. Gara, Feb 11 '18 at 18:07

Sébastien · Accepted Answer · 2018-02-11T18:13:42.087

1

DIV elements are not form elements.

There is no value or name attribute or property on a DIV element.

The easiest solution is to use an input element and remove all the default styling with CSS:

console.log(document.getElementById('div1').name); // undefined
console.log(document.getElementById('div1').value); // undefined

input {
  border: none;
  padding: none;
  background-color: transparent;
  outline: none; 
}

<input type="text" value="Some text">

<div id="div1" name="name1" value="value1"> div content</div>

edited Feb 11 '18 at 18:13

answered Feb 11 '18 at 18:07

Sébastien

Yes, that's how I've done all my life, but it's such a unnecessary detour. I wish there was a way to start with an input element "from scratch", not needing to reset all browsers' styling. – Fellow Stranger Feb 11 '18 at 18:11
It will be even more work trying to make a DIV do the work of an INPUT... especially if all you want is to get rid of syling. The other way around, adding **behavior**, is way more complicated. – Sébastien Feb 11 '18 at 18:12

1 Answers1