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

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, за да видите как изглежда моят вариант. Ще съм много благодарен ако някой ми обясни какво точно трябва да се промени в кода или просто да покаже неговия сполучлив вариант.

Тагове:

25/06/2017 17:42:39 HTML/CSS

Виж всички отговори

dvdty 497 Точки

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

25/06/2017 20:36:06

KristianZanev 16 Точки

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

26/06/2017 16:14:58

Виж всички отговори