Замените выпадающее меню текстовым полем в адаптивном шаблоне - PullRequest
Новая
       6

Замените выпадающее меню текстовым полем в адаптивном шаблоне

0 голосов
/ 25 августа 2018

Я хотел бы заменить выпадающее меню текстовым полем в форме поиска. Текстовое поле должно иметь тот же размер, что и заменяемое раскрывающееся меню.

Код формы: 

    <form action="#">
                <input type="text" class="form-control" placeholder="Type your key word">
                <div class="dropdown category-dropdown">                        
                    <a data-toggle="dropdown" href="#"><span class="change-text">Job Location</span> <i class="fa fa-angle-down"></i></a>
                    <ul class="dropdown-menu category-change">
                        <li><a href="#">Location 1</a></li>
                        <li><a href="#">Location 2</a></li>
                        <li><a href="#">Location 3</a></li>
                    </ul>                               
                </div><!-- category-change -->
                <button type="submit" class="btn btn-primary" value="Search">Search</button>
            </form>

Style: 

.category-dropdown {
  background-color: #fff;
  border-right: 1px solid #e6e6e6;
  border-radius: 5px 0px 0px 5px; 
  min-width: 200px;
  line-height: 45px;
  text-align: left;
  padding: 0 20px;
}

В любом случае, здесь есть ссылка на шаблон:

https://demo.themeregion.com/jobs-updated/

Может быть, это тривиальный вопрос, но я новичок в технической поддержке css, так как я бэкэнд-разработчик.

1 Ответ

0 голосов
/ 26 августа 2018

Простой способ был бы примерно таким, вместо <div class="dropdown category-dropdown">: 

<input type="text" class="form-control category-textbox" placeholder="Type your key word">

Style: 

.category-textbox{
  width: 20%;
  min-width: 20%;
}
...