I want to remove box-shadow of all input elements by javascript. I have tried this but it does not work.

document.getElementsByTagName('input').style.boxShadow = '';

I want to remove box-shadow of all input elements by javascript. I have tried this but it does not work.

document.getElementsByTagName('input').style.boxShadow = '';

• javascript

• no jQuery, mootools or else ? – Pierre Granger Commented Mar 24, 2014 at 13:01
• I am a beginner, dont know jQuery yet. is it possible only with javascript? – Martin Commented Mar 24, 2014 at 13:03
• Why can't you remove the styles in CSS? – Bojangles Commented Mar 24, 2014 at 13:03
• getElementsByTagName returns an array which does not have 'style' property – Alex Ackerman Commented Mar 24, 2014 at 13:04
• 3 @Martin: "I am a beginner, dont know jQuery yet. is it possible only with javascript?" jQuery is just a library of functions written in JavaScript using the various interfaces available in the browser. There's nothing jQuery can do that you can't do without jQuery. (Using a library can save you time, though.) – T.J. Crowder Commented Mar 24, 2014 at 13:07

2 Answers 2

Array.prototype.forEach.call(document.getElementsByTagName('INPUT'), function(el) {
     el.style.boxShadow = '';
});

getElementsByTagName returns NodeList, which is sort of like an Array; has length property, and is enumerable, but has no other goodies.

And here's an alternative which you should prefer:

var elements = document.getElementsByTagName('INPUT');
var len = elements.length;
for(var i = 0; i < len; ++i) {
 elements[i].style.boxShadow = '';
}

But If I were you, I'd invest my time into learning jQuery, because of this:

$("input").css("boxShadow", "none");

The getElementsByTagName() method returns a collection of all elements in the document with the specified tag name, as a NodeList object.

you can quickly convert NodeList object to array by this way [...NodeList]

1. convert NodeList object to array [...document.getElementsByTagName('input')]
2. then use forEach to loop through elements

full code:-

[...document.getElementsByTagName('input')].forEach( function(el){
    el.style.boxShadow = 'none';
});

Example:-

var NodeList = document.getElementsByTagName('input');
[...NodeList].forEach( function( el, i ) {
  if ( i === 1 ) return; // keep a box shadow for second input
  if ( el.classList.contains('shadow') ) return; // keep a box shadow for shadow class
  el.style.boxShadow = 'none';
});

input {
  display: inline-block;
  padding: 5px;
  margin-top: 10px;
  box-shadow: 0 0 5px #000;
}

<input name="input-1" type="text" value="Input 1" /><br/>
<input name="input-2" type="text" value="Input 2" /><br/>
<input name="input-3" type="text" value="Input 3" /><br/>
<input name="input-4" type="text" value="Input 4" /><br/>
<input class="shadow" name="input-5" type="text" value="Input 5" /><br/>
<input name="input-6" type="text" value="Input 6" />