javascript — Не получается оформить кнопку ‘submit’ в css
Вопрос задан
Изменён 8 лет 2 месяца назад
Просмотрен 426 раз
Доброе всем время.
У меня javascript добавляет строку в таблице, в которой добавляется кнопка (в виде картинки):
<td><input name='save' type='submit'></td>
Которую я пробую описывать в css:
.btn_save
{height: 50px;
width: 70px;
margin: 0;
padding:0;
border: 0;
background: transparent url('save.png') no-repeat center top;
text-indent: -1000em;
cursor: pointer;
cursor: hand; }
Сразу скажу, что такое оформление подсмотрел на сайте.
Но почему-то у меня в разных browsers происходит что-то непонятное с размерами кнопки, (допустим, когда я открыл режим («opera drgonfly») в opera, я увидел, что это высота первоначальной кнопки «submit» режет изображение, а в dreamweaver – как бы все нормально, но текст кнопки «submit» лежит по вех моего изображения), т.
Где тут собака зарыта?
P.S. Если я описываю ее в html, то все нормально:
<?=Form::image(
'submit', 'picture',
array('src' => 'media/Img/save.png',
'onmouseover' => 'this.src=\'/media/Img/save_click.png\';',
'onmouseout' => 'this.src=\'/media/Img/save.png\';',
)
)?>
- javascript
- kohana
- css
просто там есть режим «Split»
Да, я в курсе. Использовал этот продукт еще когда он принадлежал компании Macromedia
@Konstantin78, не очень понято, зачем Вы используете отступ text-indent (а-ля красная строка). Хотя, наверно, чтобы дефолтный текст убрать. Достаточно для кнопки прописать value="":
<input name='save' type='submit' value="">
- Пример с загрузкой по url (могут быть проблемы с 403/404 ошибкой, ибо грузится с dropbox)
- Пример с data uri (изображение в base64 кодировке).
Применяйте стиль не к классу, а к элементу:
[css]
input[type=submit] {
•••
}
[/css]
или конкретизируйте (если еще будут сабмиты с другими стилями):
[css]
input[type=submit].btn_save {
•••
}
[/css]
Зарегистрируйтесь или войдите
Регистрация через Google Регистрация через Facebook Регистрация через почтуОтправить без регистрации
ПочтаНеобходима, но никому не показывается
Отправить без регистрации
ПочтаНеобходима, но никому не показывается
By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.
Используя CSS, можно изменить дизайн практически любого элемента блога, а при помощи JavaScript еще и его функциональность.
Чтобы изменить вид стандартных кнопок «поделится» в блоге на платформе Blogger, достаточно лишь добавить желаемые CSS-свойства к правильно указанным идентификаторам. По желанию, можно самостоятельно дополнить набор кнопок установленных по умолчанию, HTML-кодом своих кнопок с ссылками нужных социальных сетей, например ВКонтакте или Одноклассники. Если имеющийся вариант не устраивает совсем, по ряду объективных причин, то можно заменить весь блок используя JS-плагин от стороннего разработчика или свой собственный.
Как изменить оформление стандартных кнопок для публикации Blogger
Многие, предпочитают вовсе заменить в своем блоге стандартный виджет кнопок поделиться, одной из причин такого желания, по крайней мере у меня, был не совсем современный дизайн самих кнопок.
.post-share-buttons.goog-inline-block {
display: block;
}
.goog-inline-block {
margin: 3px 3px 3px 0;
}
.share-button {
width: 40px;
height: 20px;
background-image: none !important; /*для некоторых свойств значение !important обязательно*/
background-color: #000 !important;
border-radius: 3px;
overflow: hidden;
position: relative;
text-align: center;
}
.share-button:hover {
opacity: .7;
}
.share-button:before {
display: inline-block;
font-family: FontAwesome; /*для иконок подключаем иконочный шрифт*/
margin-top: 2px;
}
.sb-email {
background-color: #989898 !important;
}
.sb-blog {
background-color: #FD9020 !important;
}
.sb-facebook {
background-color: #3859B7 !important;
}
.sb-pinterest {
background-color: #EC1717 !important;
}
.
background-color: #5DC5EC !important;
}
a.share-button[href*=»blog»]:before {content:»\f040″}
a.share-button[href*=»facebook»]:before {content:»\f09a»}
a.share-button[href*=»twitter»]:before {content:»\f099″}
a.share-button[href*=»pinterest»]:before {content:»\f231″}
a.share-button[href*=»email»]:before {content:»\f0e0″}
Результат будет примерно таким:
Как добавить кнопки других социальных сетей к стандартным кнопкам Blogger
Чтобы получить возможность делиться своим контентом в отечественных социальных сетях достаточно добавить в код стандартного блока share-кнопок от Blogger HTML-код нужной кнопки. После строки: <b:includable var=’post’>
<b:if cond=’data:top.showPlusOne’><…
<a expr:href=’"http://vk.com/share.php?url=" +data:blog.canonicalUrl+ "&title=" +data:blog.
pageName+ "&description=" +data:blog.metaDescription+ "&image=» +data:blog.postImageUrl+ "&noparse="+true’ target=’_blank’ rel=’nofollow’/>
— имя страницы: data:blog.pageName
— краткое описание страницы: data:blog.metaDescription
— изображение на странице: data:blog.postImageUrl
Ссылки для кнопок «Поделиться» в сети Одноклассники и Mail.Ru выглядят так:
http://connect.mail.ru/share?url=[data:blog.canonicalUrl]&title=[data:blog.pageName]&description=[data:blog.metaDescription]&imageurl=[data:blog.postImageUrl]
http://www.odnoklassniki.ru/dk?st.cmd=addShare&st.s=1&st._surl=[data:blog.canonicalUrl]&st.comments=[data:blog.pageName]
©http://magentawave.com
ch5-кнопочный стиль
| Класс CSS | Описание |
|---|---|
| ch5-кнопка | Основной класс |
| кнопка ch5-этикетка | Наносится на этикетку |
| ch5-кнопка-иконка | Наносится на иконы |
| ch5-кнопка—img | Наносится на изображения |
| ch5-кнопка—прямоугольник | Применяется, когда shape=’прямоугольник’ |
| ch5-кнопка-закругленный прямоугольник | Применяется, когда shape=’rounded-rectangle’ |
| ч5-кнопка-кружок | |
| ch5-кнопка-овальная | Применяется, когда shape=’oval’ |
| ch5-кнопка—вкладка | Применяется, когда shape=’tab’ |
| ch5-кнопка-текст | Применяется, когда type=’text’ |
| ch5-кнопка—опасность | Применяется, когда type=’danger’ |
| ch5-кнопка—предупреждение | Применяется, когда type=’warning’ |
| ch5-кнопка—информация | Применяется, когда type=’info’ |
| кнопка ch5 — успех | Применяется, когда type=’success’ |
| кнопка ch5 — по умолчанию | Кнопка по умолчанию |
| ch5-кнопка—основной | Применяется, когда type=’primary’ |
| ch5-кнопка—вторичный | Применяется, когда type=’secondary’ |
| ch5-кнопка — выбрано | Применяется при подаче выбранного сигнала |
| ch5-кнопка — нажата | Применяется между пресс-релизами и релизами |
| ch5-кнопка — отключено | Применяется, когда кнопка отключена |
| ch5-button—stretch-width | Применяется, чтобы сделать ширину настолько большой, насколько позволяет его родитель. |
| ch5-button—stretch-height | Применяется, чтобы сделать высоту настолько большой, насколько позволяет его родитель. |
| ch5-button—stretch-оба | Применяется, чтобы сделать ширину и высоту настолько большими, насколько позволяет его родитель. |
| ch5-кнопка-вертикальная | Вертикальная ориентация |
| ch5-кнопка—горизонтальная | Горизонтальная ориентация |
| ch5-button—size-x-small | Применяется, когда size=»x-small» |
| ch5-кнопка—размер-маленький | Применяется, когда size=»small» |
| ch5-кнопка-размер-обычный | Применяется, когда size=»regular» |
| ch5-кнопка-размер-большой | Применяется, когда размер = «большой» |
| ch5-кнопка-размер-x-большой | Применяется, когда size=»x-large» |
| ch5-button—icon-url-fill-type-stretch | Применяется, когда iconUrlFillType=»stretch» |
| ch5-button—icon-url-fill-type-stretch-aspect | Применяется, когда iconUrlFillType=»stretch-aspect» |
| ch5-button—icon-url-fill-type-center | Применяется, когда iconUrlFillType=»center» |
| ch5-button—icon-url-fill-type-tile | Применяется, когда iconUrlFillType=»tile» |
| ch5-button—icon-url-fill-type-initial | Применяется, когда iconUrlFillType=»initial» |
| ch5-button—background-image-fill-type-stretch | Применяется, когда backgroundImageFillType=»stretch» |
| ch5-button—background-image-fill-type-stretch-aspect | Применяется, когда backgroundImageFillType=»stretch-aspect» |
| ch5-button—background-image-fill-type-tile | Применяется, когда backgroundImageFillType=»tile» |
| ch5-button—background-image-fill-type-center | Применяется, когда backgroundImageFillType=»center» |
[CSS] — Как оформить квадратную кнопку с помощью CSS — SheCodes
Узнайте, как создать квадратную кнопку с помощью CSS.
Пошаговое руководство по созданию квадратной кнопки CSS с кодом.
👩💻 Технический вопрос
Спросил 4 месяца назад в CSS Дарья
, пожалуйста, предложите CSS для квадратной кнопки
HTML кнопка стиль дизайн квадрат CSS форма
Дополнительные вопросы по кодированию о CSS👩💻 Технический вопрос
Спросил 11 дней назад в CSS Мишель
Почему класс «Сегодня» не помещен непосредственно под класс «Визуальный»? Как мне сделать это так? .weatherAppBody { дисплей: блок; верхнее поле: 100 пикселей; поле справа: 300 пикселей; нижняя граница: 100px; поле слева: 300px; отступ: 80px 100px; } ч2 { размер шрифта: 20px; выравнивание текста: по левому краю; поле: 0 авто; плыть налево; } h3 { вес шрифта: 100; } .
текущая информация {
отображение: встроенный блок;
выравнивание текста: по левому краю;
поле: 0 авто;
}
.localInfo {
стиль списка: нет;
отображение: встроенный блок;
}
.сегодня {
выравнивание текста: вправо;
поле сверху: 0px;
поле справа: 0px;
поплавок: справа;
}
.визуальный {
стиль списка: нет;
поплавок: справа;
поле сверху: 0px;
поле справа: 0px;
ясно: оба;
}
.Полная неделя {
размер шрифта: 20px;
положение: нижнее; внизу: 0px;
нижняя граница: 0px;
} УС флексбокс заказ имущества
👩💻 Технический вопрос
Спросил 19 дней назад в CSS Татьяна
как закодировать страницу с фоновым изображением, которое является адаптивным
background-image отзывчивый CSS медиа-запрос
👩💻 Технический вопрос
Спросил 19 дней назад в CSS Татьяна
как выровнять две кнопки по сторонам
CSS флексбокс выравнивание содержания кнопки
👩💻 Технический вопрос
Спросил 19 дней назад в CSS Татьяна
как раскрасить шрифт в навбаре
CSS панель навигации цвет шрифта
👩💻 Технический вопрос
Спросил 19 дней назад в CSS Кларисса
Как изменить конкретное семейство шрифтов в синтаксисе
CSS семейство шрифтов синтаксис селектор
👩💻 Технический вопрос
Спросил 19 дней назад в CSS от Folasayo
как добавить навигационный бургер на средний экран
навигация бургер меню медиазапросы отзывчивость
👩💻 Технический вопрос
Вопрос 19дней назад в CSS от Folasayo
как скрыть панель навигации для среднего экрана?
панель навигации медиа-запрос Адаптивный дизайн
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Florencia
как я могу центрировать css ul
CSS ул центр
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Алина
как сделать текст фиксированным
CSS текст фиксированная позиция окно просмотра прокрутка
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Folasayo
какую утилиту CSS я могу использовать для увеличения моего изображения?
УС полезность изображение трансформировать шкала
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Сулинни
изменить код меню размера шрифта css
меню размер шрифта Свойство CSS Документация MDN
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Meegan
как мне выровнять текст по вертикали внутри столбца сетки изменения размера vw
выровнять по вертикали
текст
оч.
сл.
отзывчивый
столбец сетки
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Meegan
Как вертикально выровнять текст внутри столбца
вертикальное выравнивание текст столбец Свойство CSS дисплей: гибкий выравнивание элементов: по центру
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Meegan
Как заставить столбцы переключаться между 2 и 1 при изменении размера окна
УС медиазапросы флексбокс Адаптивный дизайн
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Trang
почему мы не можем использовать text-align: center в css для центрирования изображения
выравнивание текста центрирование изображения элемент блочного уровня отображать поля
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Транг
как центрировать изображение
по центру изображение допуск флексбокс стиль
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Ravneet
мой код не такой жирный, как хотелось бы
CSS вес шрифта стиль веб-дизайн
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Равнит
почему моя кнопка не находится в центре
CSS центр кнопка флексбокс
👩💻 Технический вопрос
Спросил 20 дней назад в CSS by Ravneet
мой вес шрифта не такой жирный, как хотелось бы
CSS вес шрифта смелый типография
👩💻 Технический вопрос
Спросил 20 дней назад в CSS от Хой
как изменить верхнюю часть магина для svg
CSS SVG поле сверху
👩💻 Технический вопрос
Спросил 21 день назад в CSS Дариэль Морис
Как изменить цвет фона элемента управления формы, когда он отключен?
УС фоновый цвет контроль формы неполноценный стиль
👩💻 Технический вопрос
Спросил 21 день назад в CSS by Molly
как создать пространство между ссылками
CSS ссылки допуск пробел
👩💻 Технический вопрос
Спросил 21 день назад в CSS by Araceli
я хочу центрировать ссылку, которая выглядит как кнопка
центр связь кнопка отображать выравнивание текста
👩💻 Технический вопрос
Спросил 21 день назад в CSS by Araceli
почему моя ссылка занимает всю ширину страницы
CSS связь ширина блочный уровень отображать свойство
👩💻 Технический вопрос
Спросил 21 день назад в CSS by Carolina
Как изменить расстояние между моим изображением и верхом?
УС маржинальное свойство изображение верхний пробел
👩💻 Технический вопрос
Спросил 22 дня назад в CSS by Agobokoe
код цвета фона страницы
цвет фона Цвета CSS веб-страница
👩💻 Технический вопрос
Спросил 22 дня назад в CSS Надин
как работает родительский код наследования в css?
УС наследовать родительский элемент дочерний элемент
👩💻 Технический вопрос
Спросил 22 дня назад в CSS by Arianna
как изменить размер одного элемента сетки, но сохранить размер другого без изменений
CSS сетка сетка-шаблон-столбцы сетка-столбец Адаптивный дизайн
👩💻 Технический вопрос
Спросил 22 дня назад в CSS от Арианны
как исправить, если размер одного из элементов сетки вообще не изменяется?
УС сетка размеры характеристики поиск и устранение неисправностей
👩💻 Технический вопрос
Спросил 22 дня назад в CSS by Taylor
Как с помощью CSS сделать изображение с закругленными углами?
УС изображение закругленные углы радиус границы
👩💻 Технический вопрос
Спросил 22 дня назад в CSS от Arianna
как установить направление сетки на строки?
УС сетка ряды макет
👩💻 Технический вопрос
Спросил 22 дня назад в CSS Тейлор
Как я могу сделать стиль всего веб-сайта центрированным и масштабируемым в CSS?
УС Веб-сайт центр шкала флекс
👩💻 Технический вопрос
Спросил 22 дня назад в CSS by Tameka
как немного сместить центрированный текст немного влево
CSS выравнивание текста отступ текста центральный текст
👩💻 Технический вопрос
Спросил 22 дня назад в CSS Кристин
как изменить цвет ссылки
УС гиперссылка цвет селектор класс
👩💻 Технический вопрос
Спросил 22 дня назад в CSS Эми
Как мне найти все кнопки, которые содержат «Продолжить покупки» в инструментах разработчика Chrome
chrome инструменты разработчика кнопки поиск Селектор CSS
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Хейзел
как сделать панель навигации по центру
панель навигации центр выравнивание текста
👩💻 Инструкции по коду HTML, CSS и JavaScript
Спросил 23 дня назад в CSS by Hazel
сделать панель навигации по центру
панель навигации центр выравнивание текста CSS стиль
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Фоласайо
как изменить размер кнопки?
УС кнопка изменить размер ширина высота
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Folasayo
как настроить кнопку по центру?
УС кнопка центр
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Хейзел
как оформить изображение логотипа в css?
УС изображение логотип стиль селектор
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Folasayo
как добавить границу к моему изображению в CSS?
УС граница изображение
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Фоласайо
как изменить размер изображения в CSS?
УС изображение изменить размер ширина высота
👩💻 Технический вопрос
Спросил 23 дня назад в CSS от Arianna
можете ли вы добавить flexbox в сетку?
УС флексбокс макет сетки
👩💻 Технический вопрос
Спросил 24 дня назад в CSS Ная
Что такое каскад?
каскад стили HTML конфликт приоритет
👩💻 Технический вопрос
Спросил 24 дня назад в CSS by Elicea
Как переместить кнопку рядом с текстовой формой, а не под ней?
УС позиционирование HTML кнопка текстовая форма
👩💻 Технический вопрос
Спросил 24 дня назад в CSS Сара
мы должны добавить поля к телу?
УС элемент тела допуск интервал код
👩💻 Технический вопрос
Спросил 24 дня назад в CSS автор Arianna
как настроить сетку для размещения контента по горизонтали?
УС сетка макет дизайн отзывчивый
👩💻 Технический вопрос
Спросил 24 дня назад в CSS от Arianna
можете ли вы создать сетку css в существующей сетке?
Сетка CSS вложенная сетка HTML веб-дизайн
👩💻 Технический вопрос
Спросил 24 дня назад в CSS от Arianna
как установить размер контейнера для определенных ячеек сетки?
Сетка CSS размер контейнера сетка-шаблон-строки сетка-шаблон-столбцы фр
👩💻 Технический вопрос
Спросил 24 дня назад в CSS автор Arianna
Как мне заставить мою сетку сохранять промежутки между столбцами при уменьшении размера?
УС сетка зазор сетки мин Макс отзывчивый
Просмотрите вопросы по кодированию по темам: HTML CSS JavaScript Код ВС Питон Реагировать Начальная загрузка Попутный ветер Джава PHP Node.