Question

I have the following code:

HTML

<div id=addQuesion">
  <li>
    <label>Text</label>
    <input type="text"/>
  </li>
  <li>
    <label>Try</label>
    <input type="button"/>
  </li>
</div>

CSS

#addQuesion li label {
  position: relative;
  top: 10px;
  left: 10px;
  font-size: 25px;
  border: 1px black solid;
  padding-right: 50px;
}

#addQuesion li input {
  position: relative;
  top: 10px;
  left: 10px;
  width: 400px;
  font-size: 25px;
}

For sure the two inputs will take the width 400px, but I am asking how to make each input (text, button) have a different width.

I know I can use style like this <input style="..." /> but I need to use CSS. I also know that I can use different <div> for each input but I want to put them in the same div.

Answer 1

You can target inputs by their type thus applying different styles to them:

CSS

/* Text Field */
#addQuesion input[type="text"] {
  width: 200px;
}

/* Button */
#addQuesion input[type="button"] {
  width: 20px;
}

You can read more about this here: W3C Attribute Selector