0
112
ViewsRemove border outline when key stroked with javscript or css
Can anyone point me in the right direction for my problem. I wrote a rule that will out line my input box when there is no value submitted. But now would like to remove the red outline when I start typing in the input box. Suggestions?
CSS
.placeholder-red-text {
border: 1px solid #ff0000 !important;
}
JS
return x.classList.add('placeholder-red-text');
HTML
<input id="red-border-error"></input>
·
Juan Pablo Isaza
1 answers
Answer question0
You can use another attribute of your input to set the style, i can think of three simple examples:
1: Make the input required and check if the input is valid
.foo { outline: 2px }
.foo:valid { outline: 0 }
and in your html
<input class="foo" required>
2: Do the same with a data attribute and some js like this
const fooEl = document.querySelector('.foo')
fooEl.addEventListener('input', (e) => {
fooEl.setAttribute('data-foo', e.target.value)
}).foo {
outline: 2px yellow solid;
}
.foo:not([data-foo=""]) {
outline: 0;
}<input type="text" class="foo" data-foo="">3: Same as before but setting a new class, or just setting a boolean value for the data-attribute instead of the value..
·
Juan Pablo Isaza
Report
Answer question