-1

In the following code, how can I select the form element (number type) in CSS?

<div id="alayeghh">
 <div class="backwrapper backwrappercolor">
  <div class="alayegh">
   <div class="container">
    <div class="onecolumns">
    <p class="description"> Hi </p></br>
    </div><!--description -->
     <div  class="two columns">
        <form action="" autocomplete="on" id=form2">
            <input type="number" id="markaz" name="f" min="0" max="10"><br><br>
        </form>
   </div>
  </div>
 </div>
</div>
kayhan
  • 45
  • 8
  • easiest way for your case would be `#markaz { ... }` – Berci Jun 22 '21 at 07:51
  • @Berci, I agree, but that style will be applied only to element with provided Id. For more generic styles, which will be applied to all input elements of specific type, you should check my answer. – HC1122 Jun 22 '21 at 07:52
  • 1
    @HC1122 it depends a lot for what we wants. If he want to style all input numbers in all page, I agree with your answer. If he want to style just for the specific form he could use `#markaz { ... }` for one element, `# form2 input { ... }` to select all inputs inside the form , or just the number input fields inside the form with `#form2 input[type=number] { .... }`. – Berci Jun 22 '21 at 07:55

2 Answers2

2

Did you check other solutions?

Also you can achieve that by doing

form input[type=number] {
    background-color: red;
    width: 100%;
}
HC1122
  • 404
  • 1
  • 6
  • 19
0

if your page contains just one form and one input number element,

you can select it with input[type=number].

if your working with more than the codes you posted. all of the input number element will be selected.

And if you want them to have a unique styles, you can select them with their id. ex: #markaz

And also you might wanna read this. Naming conventions in HTML

Jerwin Mathew Aton
  • 47
  • 6