Всех с наступающим !
Для поиска по введенной строке я добавил компонет vue-instant на страницу с кастомным дизайном :
CODE ( html):
скопировать код в буфер обмена
<div class="form-group"> <div class="form-box"> <div class="form-box__label"><span>Имя и фамилия</span></div> <div class="form-box__content"> <input type="text" class="form-control" placeholder="Ваше и v-model="form.name"> </div> </div> </div> <div class="form-group"> <div class="form-box"> <div class="form-box__label"><span>Город проживания</span></div> <div class="form-box__content" style="border: 0px dotted red !important; padding-right: 40px !important;"> <vue-instant :suggestOnAllWords="true" :suggestion-attribute="'title'" v-model="form.city_title" :disabled="false" @selected="selected" :show-autocomplete="true" :autofocus="false" :suggestions="citiesSelectionArray" style=" padding-right: -90px !important;" class="form-control" name="customName" placeholder="Выберите город" type="google"> </vue-instant> </div> </div> </div>
И у этого компонет нужно сделать как у остальных инпутов и у меня не получилось это https://prnt[dot]sc/24y1fgu
я пытался переопределить стили:
CODE ( htmlphp):
скопировать код в буфер обмена
.sbx-google { display: inline-block !important; position: relative !important; //width: 500px !important; //width: 100% !important; height: 41px !important; white-space: nowrap !important; //box-sizing: border-box !important; box -sizing : unset !important ; // THAT DOES NOT WORK font-size: 14px !important; border:none !important; // THAT DOES NOT WORK //border:2px dotted green !important; } .sbx-google__input { display: inline-block; position: absolute !important; left: 0 !important; top: 0 !important; transition: box-shadow .4s ease, background .4s ease; border: none !important; border-radius: 8px; //box-shadow: inset 0 0 0 1px #cccccc; background: rgba(255, 255, 255, 0); padding: 0; padding-right: 77px; padding-left: 11px; width: 100%; height: 100%; vertical-align: middle; white-space: normal; font-size: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .sbx-google__submit { // Сделал кнопку справа невидимой display: none !important; }
Вживую :
http://photographers[dot]my-demo-apps[dot]tk/
Кнопка Войти - справа вверху
john_doe@site.com
11111111
и далее на http://photographers[dot]my-demo-app[dot][dot][dot]le/edit/personal
Спасибо!
|
Главная
Помощь
Поиск
Пользователи
Форумы портала PHP.SU » Клиентская разработка » HTML, Дизайн & CSS (Модераторы: ALEN, armancho7777777)
Без описания
