Софтуерно Инженерство
Loading...
+ Нов въпрос
KristianZanev avatar KristianZanev 16 Точки

HTML FORMS & STYLING excercises 3. Room Reservation проблем

https://codepen.io/dodospambot/details/pwWRwp/ 

https://drive.google.com/open?id=0B8CfJHK-RkTbaFZ5cWxvQ2dFUjQ

Здравейте, имам проблем споменатата задачка. По-конкретно със search bar-a и иконката в него. Искам да разбера как мога да ги позиционирам точно както е показано в примерa, изполвайки glyphicon-a. Прикачвам html и css-a, за да видите как изглежда моят вариант. Ще съм много благодарен ако някой ми обясни какво точно трябва да се промени в кода или просто да покаже неговия сполучлив вариант.

Тагове:
0
HTML/CSS
dvdty avatar dvdty 465 Точки
Best Answer

Нещо такова?

Използвах background-image върху input-a и след това го позиционирах в ляво, в средата (вертикално), и му зададох да не позаква само веднъж.

 

<div class="search-section"> 
    <label class="label-search">Search</label>
    <input type="text" class="form-control" placeholder="Search" />
</div>
.search-section .form-control {
    background-image: url('https://raw.githubusercontent.com/DvDty/Head/master/img/nav-right-search_icon.png');
    background-position: 5px 50%;
    background-repeat: no-repeat;
    padding: 5px 0px 5px 23px;
    border: 0;
    border-radius: 3px;
    margin-left: 5px;
}

Можеш да си смениш иконата в линка с тази, която ти позлваше от glyphicon-а.

0
KristianZanev avatar KristianZanev 16 Точки

Точно това е, благодаря ти! Ако имах достатъчно точки щях да ти дам лайк. 

0