PHP.SU

Программирование на PHP, MySQL и другие веб-технологии
PHP.SU Портал     На главную страницу форума Главная     Помощь Помощь     Поиск Поиск     Поиск Яндекс Поиск Яндекс     Вакансии  Пользователи Пользователи


 Страниц (1): [1]   

> Без описания
mstdmstd
Отправлено: 29 Декабря, 2021 - 22:57:03
Post Id


Частый гость


Покинул форум
Сообщений всего: 170
Дата рег-ции: Авг. 2014  


Помог: 0 раз(а)




Всех с наступающим !

Для поиска по введенной строке я добавил компонет vue-instant на страницу с кастомным дизайном :
CODE (html):
скопировать код в буфер обмена
  1.      
  2.       <div class="form-group">
  3.              <div class="form-box">
  4.                    <div class="form-box__label"><span>Имя и фамилия</span></div>
  5.                          <div class="form-box__content">
  6.                                <input type="text" class="form-control" placeholder="Ваше и                                                     v-model="form.name">
  7.                          </div>
  8.                    </div>
  9.                </div>
  10.  
  11.                <div class="form-group">
  12.                     <div class="form-box">
  13.                           <div class="form-box__label"><span>Город проживания</span></div>
  14.                                 <div class="form-box__content" style="border: 0px dotted red !important; padding-right: 40px !important;">
  15.                                      <vue-instant :suggestOnAllWords="true"
  16.                                            :suggestion-attribute="'title'"
  17.                                            v-model="form.city_title"
  18.                                            :disabled="false"
  19.                                            @selected="selected"
  20.                                            :show-autocomplete="true"
  21.                                            :autofocus="false" :suggestions="citiesSelectionArray"
  22.                                            style=" padding-right: -90px !important;"
  23.                                            class="form-control"
  24.                                            name="customName" placeholder="Выберите город"              type="google">
  25.  
  26.                                    </vue-instant>
  27.  
  28.                              </div>
  29.                        </div>
  30.                    </div>
  31.  

И у этого компонет нужно сделать как у остальных инпутов и у меня не получилось это https://prnt[dot]sc/24y1fgu
я пытался переопределить стили:
CODE (htmlphp):
скопировать код в буфер обмена
  1. .sbx-google {
  2.     display: inline-block !important;
  3.     position: relative !important;
  4.     //width: 500px !important;
  5.     //width: 100% !important;
  6.     height: 41px !important;
  7.     white-space: nowrap !important;
  8.     //box-sizing: border-box !important;
  9.     box-sizing: unset !important;  // THAT DOES NOT WORK
  10.     font-size: 14px !important;
  11.     border:none !important;      // THAT DOES NOT WORK
  12.     //border:2px dotted green !important;
  13. }
  14.  
  15. .sbx-google__input {
  16.     display: inline-block;
  17.     position: absolute !important;
  18.     left: 0 !important;
  19.     top: 0 !important;
  20.     transition: box-shadow .4s ease, background .4s ease;
  21.     border: none !important;
  22.     border-radius: 8px;
  23.     //box-shadow: inset 0 0 0 1px #cccccc;
  24.     background: rgba(255, 255, 255, 0);
  25.     padding: 0;
  26.     padding-right: 77px;
  27.     padding-left: 11px;
  28.     width: 100%;
  29.     height: 100%;
  30.     vertical-align: middle;
  31.     white-space: normal;
  32.     font-size: inherit;
  33.     -webkit-appearance: none;
  34.     -moz-appearance: none;
  35.     appearance: none;
  36. }
  37.  
  38. .sbx-google__submit {   // Сделал кнопку справа невидимой
  39.     display: none !important;
  40. }
  41.  


Вживую :
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

Спасибо!
 
 Top
Страниц (1): [1]
Сейчас эту тему просматривают: 1 (гостей: 1, зарегистрированных: 0)
« HTML, Дизайн & CSS »


Все гости форума могут просматривать этот раздел.
Только зарегистрированные пользователи могут создавать новые темы в этом разделе.
Только зарегистрированные пользователи могут отвечать на сообщения в этом разделе.
 



Powered by PHP  Powered By MySQL  Powered by Nginx  Valid CSS  RSS

 
Powered by ExBB FM 1.0 RC1. InvisionExBB