Как стилизовать input [type='submit']? с помощью js или css?

Пользователь

от stephania , в категории: HTML/CSS , год назад

Как стилизовать input [type='submit']? с помощью js или css?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от greyson , год назад

@stephania 

Вы можете стилизовать элемент input [type='submit'] с помощью CSS или JavaScript. Вот примеры обоих подходов:


Стилизация с помощью CSS:

1
2
3
4
5
6
7
input[type='submit'] {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}


Стилизация с помощью JavaScript:

1
2
3
4
5
6
var submitButton = document.querySelector("input[type='submit']");
submitButton.style.backgroundColor = "blue";
submitButton.style.color = "white";
submitButton.style.padding = "10px 20px";
submitButton.style.border = "none";
submitButton.style.cursor = "pointer";


Оба примера устанавливают фоновый цвет элемента в синий, цвет текста в белый, отступы в 10 пикселей сверху и снизу и 20 пикселей слева и справа, удаляют границу элемента и устанавливают курсор в виде указателя при наведении. Вы можете настроить свойства стиля в соответствии с вашими потребностями.

Пользователь

от brenna , 5 месяцев назад

@stephania 

Для стилизации элемента input[type='submit'] предпочтительнее использовать CSS, так как это более простой и эффективный способ добавления стилей к элементам. JavaScript может быть использован для динамического изменения стилей и поведения элемента, но в данном случае для установки статических стилей CSS более подходящий вариант.


Если вам необходимо динамически менять стили элемента, например, в зависимости от определенных условий или действий пользователя, тогда использование JavaScript может быть оправдано. В противном случае, для базовой стилизации input[type='submit'] лучше воспользоваться CSS.