HTML 5: Можем ли мы изменить css для сообщения об ошибке по умолчанию - PullRequest
Новая
       9

HTML 5: Можем ли мы изменить css для сообщения об ошибке по умолчанию

0 голосов
/ 06 февраля 2020

Можно ли изменить значение по умолчанию css сообщения об ошибке, предоставленного HTML 5. 

<input type="text" name="usrname" required>

Я хочу преобразовать это сообщение по умолчанию в красный.

Ответы [ 2 ]

0 голосов
/ 06 февраля 2020

Нет. Но вы можете создать свое собственное сообщение об ошибке, используя JavaScript, чтобы отобразить хорошее сообщение об ошибке, и можете стилизовать его, как * wi sh вместо значения по умолчанию

ИЛИ

Примечание Вы можете попробовать сторонние библиотеки, такие как sweet alert, bootstrap alert и др. c. Это будет более надежным, чем обязательное свойство по умолчанию, потому что любой может проверить и удалить обязательное свойство из элемента, а затем отправить обходное поле, необходимое для заполнения.

https://sweetalert.js.org/docs/

https://getbootstrap.com/docs/4.0/components/alerts/

Спасибо тебе

0 голосов
/ 06 февраля 2020

Вы можете попробовать это: 

.c-error .c-validation{ 
  background: #c51244 !important;
  padding: 10px !important;
  border-radius: 0 !important;
  position: relative; 
  display: inline-block !important;
  box-shadow: 1px 1px 1px #aaaaaa;
  margin-top: 10px;
}
.c-error  .c-validation:before{ 
  content: ''; 
  width: 0; 
  height: 0; 
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-bottom: 10px solid #c51244;
  position: absolute; 
  top: -10px; 
}
.c-label:after{
  color: #c51244 !important;
}
.c-error input, .c-error select, .c-error .c-choice-option{ 
  background: #fff0f4; 
  color: #c51244;
}
.c-error input, .c-error select{ 
  border: 1px solid #c51244 !important; 
}
<div class="cognito">
  <script src="https://services.cognitoforms.com/s/VSqLsE7970G2a-Ir3-x6cg"></script>
  <script>
    Cognito.load("forms", {
      id: "96"
    });
  </script>
</div>
...