Css input type submit: html — How to style input and submit button with CSS?

html — CSS для input[type=»submit»]

Прежде чем я начну плакать, может кто-нибудь объяснить, почему ни одно из предпринятых CSS-решений для стилизации кнопки отправки вообще не дало никакого эффекта? Я выбрал font-size: 50px , чтобы было очевидно, попаду ли я в нужный элемент, чего я еще не сделал:

 input[type="submit"].wysija-submit {
        радиус границы: 10px;
        граница: нет;
        тень блока: нет;
        семейство шрифтов: наследовать;
        размер шрифта: 50px!важно;
    }
    
    .wysija-отправить ввод [тип = "отправить"] {
        радиус границы: 10px;
        граница: нет;
        тень блока: нет;
        семейство шрифтов: наследовать;
        размер шрифта: 50px!важно;
    }
    
    .wysija-submit.wysija-submit-field input[type="submit"] {
        радиус границы: 10px;
        граница: нет;
        тень блока: нет;
        семейство шрифтов: наследовать;
        размер шрифта: 50px!важно;
    } 

• HTML
• CSS
• ввод
• CSS-селекторы

2

Этот выполняет работу .

 input[type="submit"].wysija-submit {
    радиус границы: 10px;
    граница: нет;
    тень блока: нет;
    семейство шрифтов: наследовать;
    размер шрифта: 50px!важно;
} 

.wysija-submit input[type="submit"] и .wysija-submit.wysija-submit-field input[type=" submit"] содержат комбинаторы потомков, поэтому они не будут совпадать, потому что левая часть соответствует вводу, а правая часть ничего не соответствует, потому что входы не могут иметь потомков.

1

Символ пробела в CSS — это комбинатор потомков. Он говорит вашему компилятору CSS выбрать любого потомка предыдущего селектора.

Ваш текущий селектор пытается выбрать любой элемент с атрибутом

 
  <тип ввода = "отправить" />

 

Чтобы получить это, выберите элемент ввода , type is submit и , чей класс содержит wysija-submit и wysija-submit-field , вам нужно будет изменить свой селектор с:

Кому:

 input[type="submit"].wysija-submit.wysija-submit-field { ... }
 

5

Зарегистрируйтесь или войдите в систему

Зарегистрируйтесь с помощью Google

Зарегистрироваться через Facebook

Зарегистрируйтесь, используя адрес электронной почты и пароль

Опубликовать как гость

Электронная почта

Требуется, но никогда не отображается

Опубликовать как гость

Электронная почта

Требуется, но не отображается

css — Пользовательский стиль ввода [type = «submit»] не работает с кнопкой jquerymobile

спросил

Изменено 8 лет, 3 месяца назад

Просмотрено 130 тысяч раз

Я хочу использовать свой собственный стиль для кнопки input[type=»submit»] с кнопкой jquerymobiles, но это не работает. Мой HTML-код:

Мой код CSS:

 input[type="submit"]
{
    граница: 1px сплошной красный;
    текстовое оформление: нет;
    семейство шрифтов: Helvetica;
    красный цвет;
    background:url(../images/btn_hover.png) repeat-x;
}
 

Тот же стиль применяется, когда я использую следующий HTML-код:

 Имя кнопки
 

• css
• html
• jquery-мобильный

5

jQuery Mobile >= 1.4

Создайте собственный класс, например. .custom-btn . Обратите внимание, что для переопределения стилей jQM без использования !important необходимо соблюдать иерархию CSS. .ui-btn.custom-class или .ui-input-btn.custom-class .

 .ui-input-btn.custom-btn {
   граница: 1px сплошной красный;
   текстовое оформление: нет;
   семейство шрифтов: Helvetica;
   красный цвет;
   фон: URL (img. png) повтор-х;
}
 

Добавить класс-оболочку данных 9от 0004 до ввод . Пользовательский класс будет добавлен в input обертывающий div.

Демо

jQuery Mobile

 div.ui-btn, input[type="submit"] {
 граница: 1px сплошной красный !важно;
 украшение текста: нет !важно;
 семейство шрифтов: Helvetica! важно;
 цвет:красный !важно;
 background:url(../images/btn_hover.png) repeat-x !важно;
}