CODEWITHSUNDEEP
htmlcssformscss-selectorsfrontend
Prashant Nayak
Prashant Nayak

Reputation: 31

How can select all input elements through css?

The below css code are repeating is there any css shortcut so we can select all input field in single line of code. 


.form-group input[type='text'],
.form-group input[type='email'],
.form-group input[type='password'],
.form-group input[type='tel']  
{
   margin:10px; 
}

Upvotes: 2

Views: 6728

Answers (1)

AndrewL64
AndrewL64

Reputation: 16301

Assuming your HTML structure is something as follows:

<div class="form-group"> // or any other kind of wrapper element with a class of "form-group"
  <input type="text">
  <input type="email">
  <input type="pasword">
  <input type="tel">
</div>

You can just replace your current css with the following:

.form-group input { margin:10px; }

And the margin will be applied to all of your <input> elements nested inside your .form-group element.

Check and run the following Code Snippet for a practical example of the above code:

.form-group input { margin:10px; }
<div class="form-group">
  <input type="text">
  <input type="email">
  <input type="pasword">
  <input type="tel">
</div>

Upvotes: 5

Related Questions