The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums Design How to select 1 of 2 or more input selectors in CSS?

  • This topic is empty.
Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
  • #280546

    input type=”text” name=”first-name” placeholder=”First Name” value=””>
    input type=”text” name=”last-name” placeholder=”Last Name” value=””>

    With the 2 input textboxes above, how do I select one to style in css without the other?

    Example: 1

    .box1 input[type=text]{
    height: 30px;

    this changes both (first and last name) to height of 30px.

    but i wont to change both independently
    (lets say first name 30px; last name 35px)
    is this possible with pure CSS or is div selectors, then CSS selectors the best route?

    example 2:


    box1 input[type = text]{
    height: 30px; /for the first name/


    box2 input[type = text]{
    height: 35px; /for the password/

    Is the example 2 the best way to achive this or is example 1 possible?


    You don’t actually need to add a class, if the attribute values are unique for the page you could also do this:

    [name^="first"] {
      height: 30px;
    [name^="last"] {
      height: 35px;

Viewing 2 posts - 1 through 2 (of 2 total)
  • The forum ‘Design’ is closed to new topics and replies.