Перейти к содержанию

Рекомендуемые сообщения

Пытаюсь сделать как здесь

search.png.5beff29bfeaebb7a348d05b5f90d8773.png

 

Я так понимаю, что за него отвечает вот эти классы bootstrap 

class="form-control input-lg"

Но как их поменять?

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
1 час назад, ironzorin2 сказал:

Пытаюсь сделать как здесь

search.png.5beff29bfeaebb7a348d05b5f90d8773.png

 

Я так понимаю, что за него отвечает вот эти классы bootstrap 


class="form-control input-lg"

Но как их поменять?

<style>
#search .input-lg {
    border-radius: 30px;
}
</style>

Но вам не добиться желаемого результата без правок в html, т.к. есть ещё кнопка вне input. 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Сделал так

<div id="search" class="input-group">
  <input type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn button-search"><i class="fa fa-search"></i></button>
  </span>
</div>

<style>
#search .input-lg {
    border-radius: 30px;
}

.button-search {
  width: 1.2em;
  position: relative;
  left: -4em;
  vertical-align: middle;
  background:none;
  border:0;
  
}
</style>

Единственное, что коряво - при нажатии появляется рамка.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
43 минуты назад, ironzorin2 сказал:

Единственное, что коряво - при нажатии появляется рамка.

https://webref.ru/css/outline

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
  outline-style:none;
  outline-width:0;

Не помогло

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты
12 часов назад, ironzorin2 сказал:

  outline-style:none;
  outline-width:0;

Не помогло

#search .input-lg:focus {
  outline: none; 
}

А лучше ссылку дайте.

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Помогло добавление в .button-search

outline: none !important;

 

 

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Полный код

<div id="search" class="input-group">
  <input type="text" name="search" value="<?php echo $search; ?>" placeholder="<?php echo $text_search; ?>" class="form-control input-lg" />
  <span class="input-group-btn">
    <button type="button" class="btn button-search"><i class="fa fa-search"></i></button>
  </span>
</div>

<style>
#search .input-lg {
    border-radius: 30px;
}

.button-search {
  width: 1.2em;
  position: relative;
  left: -4em;
  vertical-align: middle;
  background:none;
  border:0;
  outline: none !important;
  
}
</style>

 

Поиск.png

Поделиться сообщением


Ссылка на сообщение
Поделиться на другие сайты

Для публикации сообщений создайте учётную запись или авторизуйтесь

Вы должны быть пользователем, чтобы оставить комментарий

Создать учетную запись

Зарегистрируйте новую учётную запись в нашем сообществе. Это очень просто!

Регистрация нового пользователя

Войти

Уже есть аккаунт? Войти в систему.

Войти

  • Последние посетители   0 пользователей онлайн

    Ни одного зарегистрированного пользователя не просматривает данную страницу

×

Важная информация

На нашем сайте используются файлы cookie и происходит обработка некоторых персональных данных пользователей, чтобы улучшить пользовательский интерфейс. Чтобы узнать для чего и какие персональные данные мы обрабатываем перейдите по ссылке. Если Вы нажмете «Я даю согласие», это означает, что Вы понимаете и принимаете все условия, указанные в этом Уведомлении о Конфиденциальности.