Как оформить поля ввода указанной c HTML формы с помощью CSS - PullRequest
Новая
       68

Как оформить поля ввода указанной c HTML формы с помощью CSS

0 голосов
/ 27 апреля 2020

Я пытаюсь оформить следующую форму. 

<form onSubmit={this.updateUserInformation} id="userInfoForm">
                    <label>First Name</label><br></br>
                    <input type="text" value="John"></input><br></br>
                    <label>Last Name</label><br></br>
                    <input type="text" value="Maloy"></input><br></br>
                    <label>Username</label><br></br>
                    <input type="text" value="John"></input><br></br>
                    <label>Password</label><br></br>
                    <input type="text" value="Maloy"></input><br></br>
                    <input type="submit" value="Update My Info"></input>
                </form>

Пожалуйста, игнорируйте мои значения; Я буду добавлять информацию Dynami c позже. Проблема в том, что у меня есть несколько форм на моей веб-странице, поэтому я не хочу создавать стиль для моего css файла для тега ввода, так как он будет стилизовать все мои поля ввода одинаково. Есть ли способ стилизовать все поля ввода формы на основе идентификатора формы без необходимости добавлять идентификатор для каждого отдельного поля ввода? Например, вот мой стиль файла css для формы, которая не совсем работает: 

#userInfoForm {
    width: 300px;
    margin: 0 auto;
    input {
        border-radius: 25px;
    }
}

Мои логики c, стоящие за этим, предназначены для стилизации каждого ввода в указанной форме. Любые предложения будут оценены!

Ответы [ 2 ]

0 голосов
/ 27 апреля 2020

Я нашел следующий ответ. Он стилизовал каждое поле ввода моей идентифицированной формы без добавления идентификатора в каждое поле. Это похоже на селектор атрибута, упомянутый выше в комментариях. 

#userInfoForm {
    width: 80%;
    padding: 5px 5px;
    margin: 0 auto;
    background: #FF6700;
    border-radius: 25px; 
}

#userInfoForm input {
    width: 100%;
    padding: 12px 20px;
    margin: 8px 0;
    box-sizing: border-box;
    border-radius: 25px;
}
0 голосов
/ 27 апреля 2020

Здесь можно задать поле ввода c с помощью уникальной части. Что позволит вам задавать стиль ввода c (возможно, если есть уникальность) без id или class

Пример : У вас есть три поля ввода - 

 - <input type="text" name="username" value="" />
 - <input type="text" name="email" value="" />
 - <input type="pass" name="password" value="" />

уникальность между тремя - это имя. Это [name="username"], [name="email"], [name="password"] (где [type = "text"] выберет первые два элемента ввода, значение = "" отбрасывается, поскольку оно может иметь случайное значение)

Это для, если вы хотите для определенной c формы, все входы различаются по внешнему виду Итак, можно применять как - 

#userInfoForm {
  width: 300px;
  margin: 0 auto;
  [name="username"]{
    border-radius: 20px;
  }
  [name="email"]{
    border-radius: 25px;
  }
  [name="password"]{
    border-radius: 30px;
  }
}

Другой способ

если количество полей ввода предварительно задано в форме, можно использовать дочерний селектор 

 #userInfoForm {
  width: 300px;
  margin: 0 auto;
  input {
    &:nth-child(1) {
       border-radius: 20px;
    }
    &:nth-child(2) {
       border-radius: 25px;
    }
  }
}

Это для случаев, когда вы хотите, чтобы разные формы ввода различались, выглядя как форма ( но для указанной c формы все входы одинаковы, разные входы формы различны) 

 #userInfoForm input {
   background-color: red;
}
 #userInfoForm2 input {
   background-color: yellow;
}
...