Перейти до вмісту
Пошук в
  • Детальніше...
Шукати результати, які ...
Шукати результати в ...

Закруглить поле поиска


Recommended Posts

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>

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

Надіслати
Поділитися на інших сайтах


Полный код

<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 користувачів

    • Ні користувачів, які переглядиють цю сторінку

×
×
  • Створити...

Important Information

На нашому сайті використовуються файли cookie і відбувається обробка деяких персональних даних користувачів, щоб поліпшити користувальницький інтерфейс. Щоб дізнатися для чого і які персональні дані ми обробляємо перейдіть за посиланням . Якщо Ви натиснете «Я даю згоду», це означає, що Ви розумієте і приймаєте всі умови, зазначені в цьому Повідомленні про конфіденційність.