Including an Icon inside the tag
up vote
-1
down vote
favorite
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}I'm trying to make this web application using AngularJS and I am fairly new to it. I am making a navigation bar for a page to start with and I think I have done the normal bar properly. However I want to also add a search bar (haven't done the functioning yet since I have no idea how to) which will appeal when the mouse hovers over the <a> tag . I'm referring to a video which will be linked below. The difference is he is not using a navigation bar instead doing it in the middle of the video
The css and html is shown below.
The video I am referring to is this: https://www.youtube.com/watch?v=v1PeTDrw6OY
PS: what I want to do is include the icon inside the gray padding area so I can set the padding to zero and it would have the icon inside the padding alone and on hover I could expand the search bar field and let the user type. Any input regarding this is highly appreciated. Thank you
html css
asked Nov 20 at 10:46
ajstyles
227
add a comment |
up vote
-1
down vote
favorite
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}I'm trying to make this web application using AngularJS and I am fairly new to it. I am making a navigation bar for a page to start with and I think I have done the normal bar properly. However I want to also add a search bar (haven't done the functioning yet since I have no idea how to) which will appeal when the mouse hovers over the <a> tag . I'm referring to a video which will be linked below. The difference is he is not using a navigation bar instead doing it in the middle of the video
The css and html is shown below.
The video I am referring to is this: https://www.youtube.com/watch?v=v1PeTDrw6OY
PS: what I want to do is include the icon inside the gray padding area so I can set the padding to zero and it would have the icon inside the padding alone and on hover I could expand the search bar field and let the user type. Any input regarding this is highly appreciated. Thank you
html css
asked Nov 20 at 10:46
ajstyles
227
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14
add a comment |
up vote
-1
down vote
favorite
up vote
-1
down vote
favorite
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}I'm trying to make this web application using AngularJS and I am fairly new to it. I am making a navigation bar for a page to start with and I think I have done the normal bar properly. However I want to also add a search bar (haven't done the functioning yet since I have no idea how to) which will appeal when the mouse hovers over the <a> tag . I'm referring to a video which will be linked below. The difference is he is not using a navigation bar instead doing it in the middle of the video
The css and html is shown below.
The video I am referring to is this: https://www.youtube.com/watch?v=v1PeTDrw6OY
PS: what I want to do is include the icon inside the gray padding area so I can set the padding to zero and it would have the icon inside the padding alone and on hover I could expand the search bar field and let the user type. Any input regarding this is highly appreciated. Thank you
html css
asked Nov 20 at 10:46
ajstyles
227
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}I'm trying to make this web application using AngularJS and I am fairly new to it. I am making a navigation bar for a page to start with and I think I have done the normal bar properly. However I want to also add a search bar (haven't done the functioning yet since I have no idea how to) which will appeal when the mouse hovers over the <a> tag . I'm referring to a video which will be linked below. The difference is he is not using a navigation bar instead doing it in the middle of the video
The css and html is shown below.
The video I am referring to is this: https://www.youtube.com/watch?v=v1PeTDrw6OY
PS: what I want to do is include the icon inside the gray padding area so I can set the padding to zero and it would have the icon inside the padding alone and on hover I could expand the search bar field and let the user type. Any input regarding this is highly appreciated. Thank you
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: right;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
margin-top: 18px;
margin-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
}
#btn {
margin-top: 30px;
color: white;
display: flex;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}html css
html css
asked Nov 20 at 10:46
ajstyles
227
asked Nov 20 at 10:46
ajstyles
227
edited Nov 25 at 14:30
asked Nov 20 at 10:46
ajstyles
227
asked Nov 20 at 10:46
ajstyles
227
asked Nov 20 at 10:46
ajstyles
227
227
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14
add a comment |
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14
add a comment |
2 Answers
2
active
oldest
votes
up vote
0
down vote
accepted
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
answered Nov 20 at 10:54
elveti
7912715
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
add a comment |
up vote
0
down vote
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>answered Nov 20 at 11:07
Chandresh Polra
774
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391301%2fincluding-an-icon-inside-the-input-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
2 Answers
2
active
oldest
votes
2 Answers
2
active
oldest
votes
active
oldest
votes
active
oldest
votes
up vote
0
down vote
accepted
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
answered Nov 20 at 10:54
elveti
7912715
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
add a comment |
up vote
0
down vote
accepted
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
answered Nov 20 at 10:54
elveti
7912715
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
add a comment |
up vote
0
down vote
accepted
up vote
0
down vote
accepted
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
answered Nov 20 at 10:54
elveti
7912715
You need to have a common parent element to make it easier on yourself. With your HTML the most straightforward way would be to include the <a> into the <li>, instead of having it after. So turn this
<li><input type="text" id="searchbar" placeholder="Search Here"> </li>
<a class="search-btn" href="#"> <i id="btn" class="fas fa-search"></i> </a>
Into this:
<li>
<input type="text" id="searchbar" placeholder="Search Here">
<a class="search-btn" href="#"> <i id="btn" class="fa fa-search"></i> </a>
</li>
Then you can use position: absolute and easily place the icon where you want by adding this CSS:
li {
position: relative;
}
li input + a {
position: absolute;
top: 4px; /* change this */
left: 5px; /* change this */
}
answered Nov 20 at 10:54
elveti
7912715
answered Nov 20 at 10:54
elveti
7912715
answered Nov 20 at 10:54
elveti
7912715
answered Nov 20 at 10:54
elveti
7912715
7912715
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
add a comment |
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
1
1
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
Thanks alot this did the trick!
– ajstyles
Nov 20 at 17:23
add a comment |
up vote
0
down vote
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>answered Nov 20 at 11:07
Chandresh Polra
774
add a comment |
up vote
0
down vote
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>answered Nov 20 at 11:07
Chandresh Polra
774
add a comment |
up vote
0
down vote
up vote
0
down vote
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>answered Nov 20 at 11:07
Chandresh Polra
774
using search-bar class, you can get what you want
.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>.Main {
width: 100%;
height: 100%;
}
// css to show the navigation bar top and the image of westminister
h1 {
text-align: center;
font: italic bold 50px Georgia, serif;
}
#navbar ul {
margin: 0;
padding-left: 0;
padding-right: 0;
overflow: hidden;
background-color: black;
font-size: 15px;
width: 100%;
}
#navbar li {
float: left;
list-style-type: none;
}
li a {
display: inline;
color: #d9d9d9;
padding: 25px 20px;
text-decoration: none;
list-style-type: none;
}
.topnavbar {
text-align: right;
font: size 19px;
padding: 18px 20px;
margin-right: 10px;
float: right;
}
#searchbar {
text-align: left;
text-decoration-color: #ffffff;
font: size 15px;
padding: 10px;
padding-right: 20px;
float: right;
background: #2f3640;
transform: translate3d(-50%, 50%);
border-radius: 40px;
outline: none;
transition: 0.4s;
width: 150px;
}
.search-btn {
text-decoration: none;
background: transparent;
outline: 0;
border: 0;
color: #fff;
position: absolute;
right: 10px;
top: 38px;
bottom: 0;
margin: auto 0;
line-height: 100%;
display: inline-block;
line-height: 100%;
display: block;
height: 22px;
}
li a:hover:not(.active) {
opacity: 1;
color: #ffffff;
}
.active {
text-decoration: none;
color: #4da6ff;
outline: none;
}
.search-bar{
position: relative;
} <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous">
<div class="Main">
<div id="navbar">
<ul>
<li><img src="assets/img/xyz.png" alt="logo" width="180px" height="80px" style="float:left"></li>
<li> <a class="topnavbar active" [routerLink]="['page6']">Display Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page2']">Add Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page3']"> Delete Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page4']">Borrow Items </a> </li>
<li> <a class="topnavbar" [routerLink]="['page5']">Return Items</a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li> <a class="topnavbar" [routerLink]="['page6']">Generate Report </a> </li>
<li>
<div class="search-bar">
<input type="text" id="searchbar" placeholder="Search Here">
<button class="search-btn"><i id="btn" class="fas fa-search"></i></button>
</div>
</li>
</ul>
</div>
</div>answered Nov 20 at 11:07
Chandresh Polra
774
answered Nov 20 at 11:07
Chandresh Polra
774
answered Nov 20 at 11:07
Chandresh Polra
774
answered Nov 20 at 11:07
Chandresh Polra
774
774
add a comment |
add a comment |
draft saved
draft discarded
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Some of your past answers have not been well-received, and you're in danger of being blocked from answering.
Please pay close attention to the following guidance:
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
draft saved
draft discarded
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53391301%2fincluding-an-icon-inside-the-input-tag%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Consider adding both input tag and button inside one <li> this will give your desired result.
– Bidhan Majhi
Nov 20 at 11:14