Как переместить кнопку?
Использую type=»datetime-local». Хочу вместо той кнопки которую дает система использовать свою иконку.
+ из-за этого у меня вышла высота блока больше, что недопустимо. Может есть у кого идеи, буду благодарен.
- Вопрос задан более двух лет назад
- 93 просмотра
23 комментария
Простой 23 комментария
Ну ёкарный бабай, что мы делаем когда что-то не того размера, какого нужно? Наверное тюним css? Чем эта «проблема» отличается от любой другой вёрстки которую ты делал? Я в недоумении.
Mag1str @Mag1str Автор вопроса
Aetae, нет такого в сss. И вся адаптация слетит
Mag1str, что? 0_о Тыкаешь в инспекторе, смотришь от чего её распирает, правишь паддинги\маргины\высоту. Точно также минусовым маргином\абсолютной позицией перекрываешь стандартную кнопку. Только учти что в разных браузерах — она разная. Где-то и нет её вовсе.
И при чём тут адаптация?
Mag1str @Mag1str Автор вопроса
Mag1str, правильно было бы обернуть input в блок и обрезать этим блоком лишнее(всякие бордеры соответственно тоже к этому блоку применять).
Так мы всю жизнь и делали.
Но сейчас, благодаря новомодным фичам, можно вырезать дырку прямо в элементе:
input[type="date"]
input[type=»date»]::-webkit-calendar-picker-indicator, с помощью этого можно задавать стили этой иконки, попробуйте её поместить на место вашей и задать z-index, тогда всё должно работать
Mag1str @Mag1str Автор вопроса
Aetae, да, иконка которая идет вместе с date исчезла. Вопрос ещё в том как сделать иконку которую я влепил рабочей
Mag1str @Mag1str Автор вопроса
stone, не удалось сменить цвет
Mag1str, можешь либо руками клики с неё перенаправлять(самое хардкорное), либо обернуть input с иконкой в label (самое семантичное), либо положить под input с помощью z-index , чтоб клики на самом деле были по нему, либо сделать кнопку прозрачной для кликов, назначив ей pointer-events: none; .
Если нужны всякие hover и прочие эффекты — то наследуй от input :
input[type=»date»]:hover + .icon <>
Как переместить кнопку в центр css
Как выровнять кнопки по центру ?
Как выровнять кнопки по центру панели и чтобы они были в ряд? .button_1 .
Как будто ты размещаешь текст по центру.
Обратной стороной этого подхода является то, что каждый раз, когда ты хочешь центрировать кнопку, тебе придется создавать новый элемент div только для этой кнопки.
А если у тебя много кнопок, которые требуют частого обновления стиля, поддерживать их быстро становится проблемой.
В таком случае лучше использовать первый вариант.
Короче говоря, если вы настаиваете на использовании этого подхода, сделайте это только для редких кнопок.
Как центрировать кнопку с помощью CSS flexbox
Третий вариант — использовать flexbox для центрирования кнопки.
Этот подход идеален, если ты уже используешь flexbox на веб-странице, а кнопка находится внутри родительского элемента.
попытка выровнять html-кнопку в центре моей страницы
Я пытаюсь выровнять кнопку HTML точно в центре страницы, независимо от используемого браузера. Он либо плывет влево, все еще находясь в вертикальном центре, либо находится где-то на странице, как в верхней части страницы и т. д..
Я хочу, чтобы он был как вертикально, так и горизонтально центрирован. Вот что я написал прямо сейчас:—2—>
8 ответов
в основном, поместите кнопку в div с центрированным текстом:
со следующими стилями:
есть много способов освежевать кошку, и это только один.
вы можете центрировать кнопку без использования text-align на родительском div С помощью margin:auto; display:block;
HTML-код
в CSS
Я действительно недавно display: table чтобы дать вещам фиксированный размер, например, чтобы включить margin: 0 auto на работу. Сделал мою жизнь намного проще. Вам просто нужно пройти мимо того факта, что отображение «таблица» не означает таблицу html.
Это особенно полезно для адаптивного дизайна, где вещи просто становятся волосатыми и сумасшедшими, 50% оставили это и -50%, которые просто становятся неуправляемыми.
кроме того, если у вас есть два кнопки, и вы хотите, чтобы они были одинаковой ширины, вам даже не нужно знать размер каждого, чтобы они были одинаковой ширины-потому что таблица волшебным образом свернет их для вас.
(Это также работает, если они встроены, и вы хотите центрировать две кнопки из стороны в сторону — попробуйте сделать это с процентами!).
Как сделать кнопку по центру?
inline-block заставляет контейнер (div в данном случае) съёжится до размеров того, что в нём находится. Таким образом text-align не годится для выравнивания содержимого внутри inline-block . Ибо ему просто некуда двигаться. Размеры-то одинаковые.
Если div шире своего содержимого, то text-align работает.
Но Ваш кнопочный div, когда он нормальный block, растягивается по длине на всю ширину страницы. Поэтому кнопка выравнивается относительно страницы и уезжает правее относительно центра текста.
Можно сузить общий контейнер для текста и кнопки с помощью того же inline-block . Он не будет шире текста (предполагаем текст шире кнопки), кнопочный div таким образом тоже по ширине будет как текст, и кнопка теперь выравнивается относительно текста.
Понадобилось правильно установить всего два свойства css. Они самые первые. Остальное для красоты, если это кому-то нравится. Правда есть ещё элемент ubasility. Кнопка работает при нажатии не только по надписи, но и по всей области кнопки. Пользователю не надо быть снайпером.
Похожие публикации:
- Как подключить стайл css
- Как поднять локальный сервер node js
- Как полностью удалить node js
- Как поменять прицел в css v34
Переместить объект, не влияя на вёрстку
Переместить объект, не влияя на вёрстку, можно через свойство transform: translate() .
.move-element < transform: translate(20px, 20px); >
Также через данный способ рекомендуется делать анимационные эффекты, когда надо передвинуть объект (например, вместо использования margin ).
Обновлено: 03 февраля 2021
Комментарии
Авторизуйтесь, чтобы добавлять комментарии
- Вывод нескольких элементов в ряд (Flexbox)
- Различия между float и flex
- Хлебные крошки (Breadcrumbs)
- Прижать футер к низу сайта
- Выровнять дочерние элементы по ширине
- Зафиксировать меню и сайдбар (position: sticky)
- Вертикальное выравнивание
- Порядок элементов (order)
- Разница между «px», «em» и «rem»
- 8 советов вёрстки и настройки email-рассылок
- Переместить объект, не влияя на вёрстку
- Пример использования «box-decoration-break»
Смена картинок по нажатии на кнопку?
Добрый день, подскажите как найти или сделать так, чтобы при нажатии на кнопку менялись картинки (их 3).
Например, пользователь видит 1 картинку прочитал на ней что-то нажал на кнопку и ту 1 картинку заменяет 2 фотография вновь прочитал что-то, нажал на кнопку и 2 фотографию заменяет 3.
из кода ничего особенного
- Вопрос задан более года назад
- 1543 просмотра
Комментировать
Решения вопроса 2
Старт в WordPress
document.body.addEventListener('click', e => < if (!e.target.matches('button')) return document.querySelector('.pic img').src = e.target.dataset.src document.querySelectorAll('button').forEach(btn =>btn.classList.remove('active')) e.target.classList.add('active') >)Ответ написан более года назад
Комментировать
Нравится Комментировать
Middle Front-end Developer (Vue.js/Nuxt.js)
Сначала составляете массив из ваших картинок, туда вставляете пути к ним.
Далее объявляете кнопку и блок с картинкой куда будете вставлять путь
По клику на кнопку вставляете картинку и при каждом клике увеличиваете переменную на 1, если переменная равна или больше кол-во картинок — обнуляете
Ответ написан более года назад
Комментировать
Нравится Комментировать