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

[ironzorin2]

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

 

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

class="form-control input-lg"

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

[veterph]

1 час назад, ironzorin2 сказал:

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

 

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

class="form-control input-lg"

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

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

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

[ironzorin2]

Сделал так

<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>

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

[Gaziz]

43 минуты назад, ironzorin2 сказал:

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

https://webref.ru/css/outline

[ironzorin2]

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

Не помогло

[Gaziz]

12 часов назад, ironzorin2 сказал:

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

Не помогло

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

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

[ironzorin2]

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

outline: none !important;

 

 

[ironzorin2]

Полный код

<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>