Дата ввода HTML, как уменьшить расстояние между датой и значком?
Мне нужно сжать дату типа ввода, поэтому я попытался установить ширину на 120 пикселей.
Проблема в том, что между числами даты и значком даты ввода есть пробел.
Мне нужно уменьшить или удалить это пространство:
Есть ли способ сделать это?
Мой код (кстати, я использую bootstrap 4):
<input type = "date">ваш код, пожалуйста?
добавлен код, это просто дата общего типа ввода
оно недостаточно, оно не воспроизводимо. где css, как появилась иконка?
@MisterJojo значок встроен в браузер
это все еще не воспроизводимо; прочитайте stackoverflow.com/help/minimal-reproducible-example. Я добавил фрагмент в ваш код, чтобы помочь вам
@dippas, это неправильно, для всех браузеров нет стандарта, чтобы изначально отображать значок при вводе дат.
в следующий раз укажите, что хотите решить эту проблему только в Chrome, вы избавите других от ненужной траты времени.
Ответы 3
Вы можете использовать:
::-webkit-calendar-picker-indicator{
margin-left: 0px;
}
Если этого недостаточно, и вы хотите еще меньше места, просто поставьте отрицательный отступ, как в этом фрагменте:
::-webkit-calendar-picker-indicator{
margin-left: -15px;
}<input type = "date" >Примечание. Это работает в Chrome. Firefox (и, возможно, другие браузеры) может не отображать значок по умолчанию.
где икона?
@MisterJojo Я вижу значок, как на картинке в вопросе. Я использую хром. Может в каком-то браузере его нет?
попробуйте Firefox, это загрузчик, он должен быть совместим с несколькими браузерами
@MisterJojo Chrome имеет значок для даты типа ввода, он не имеет ничего общего с начальной загрузкой.
и как мне догадаться? В вопросе никогда не было определенного хромированного значка.
Когда был задан вопрос, в нем ничего не говорилось о начальной загрузке. Я открыл в хроме, и я мог видеть значок. не знал что файрфокс его не показывает
В жизни не только Chrome, и не все хотят кормить базы данных Google своими личными данными.
Вы можете настроить таргетинг на значок, используя следующий селектор css: ::-webkit-calendar-picker-indicator
Для увеличения маржи используйте:
input[type=date]::-webkit-calendar-picker-indicator {
margin-left: 100px;
}<input type = "date">
<link rel = "stylesheet" href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity = "sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin = "anonymous">Чтобы уменьшить пространство, используйте отрицательное поле или любой другой параметр.
Правильный способ использования значков на <input type="date" с бутстрапом 4
Календарь значков Boostrapt: https://icons.getbootstrap.com/icons/calendar/
образец кода:
input[type = "date"]::-webkit-calendar-picker-indicator {
position : absolute;
left : 0;
margin : 0;
width : 2em;
transform: translateX(-2.5em);
opacity : 0;
}
form { margin:1em }<link rel = "stylesheet" href = "https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" />
<form>
<div class = "form-row align-items-center">
<div class = ""> <!-- col-sm-3 my-1-->
<div class = "input-group">
<div class = "input-group-prepend">
<label for = "DteInput" class = "input-group-text">
<svg xmlns = "http://www.w3.org/2000/svg" width = "16" height = "16" fill = "currentColor" class = "bi bi-calendar" viewBox = "0 0 16 16">
<path fill-rule = "evenodd" d = "M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z"/>
</svg></label>
</div>
<input type = "date" class = "form-control" id = "DteInput" placeholder = "">
</div>
</div>
</div>
</form>конечно, вам придется немного побороться за помехи в хромированном значке
см.:
Способ отображения встроенного средства выбора даты в Chrome
Способ отображения встроенного средства выбора даты в Chrome
вы должны включить свой код, чтобы люди могли помочь вам лучше