CSS display inline - html

Question

i'm trying display close icon inside input text. struggling with CSS issue. my code was
<div class="input-group">
<input type="text" class="form-control" />
<i class="fa fa-times-circle ng-hide"></i>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="fa fa-search"></span> Search
</button>
</span>
</div>
that shows underneath the text box control instead of showing inside the text box could you please help me to fix the css issue
here is the sample plunker

Answer 1

Make the icon position: absolute and position with right and top.
The input-group is already position:relative and the icon will position itself in relation to it.
z-index: 2 places the icon above the text input.
It will now look like this:
or without the input group and button:
Examples
In this example I have placed an additional class (.inside) on the icon element so that it will only apply to specified icons.
With input-group
Note .input-group .inside { right: 100px; }. This ensures that when there is a button (inside the input group), then the close button gets extra space on the right.
.inside {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
.input-group .inside {
right: 100px;
}
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" />
<i class="fa fa-times-circle ng-hide inside"></i>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="fa fa-search"></span> Search
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
Without input-group
body {
padding-top: 50px; /* ignore this. It is just for this example*/
}
.inside {
position: absolute;
top: 10px;
right: 20px;
z-index: 2;
}
.input-group .inside {
right: 100px;
}
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<input type="text" class="form-control" />
<i class="fa fa-times-circle ng-hide inside"></i>
</div>
</div>
</div>
</div>
</div>

Answer 2

Demo
You need to add following css
.fa-times-circle:before {
content:"\f057";
position: absolute;
right: 90px;
z-index: 2;
top: 10px;
}

Answer 3

Add relative position for input-group and than move close icon with position: relative;
.input-group {
position: relative;
}
.close-icon {
position: absolute;
top: 10px;
right: 100px;
z-index: 6;
}
/* Styles go here */
/**********************/
/* prevent text from appearing underneath the icon */
input[reset-field] {
padding-right: 19px;
}
/* hide the built-in IE10+ clear field icon */
input[reset-field]::-ms-clear {
display: none;
}
/* hide cancel icon for search type */
input[reset-field]::-webkit-search-cancel-button {
-webkit-appearance: none;
}
/* icon styles */
input[reset-field] + .fa {
position: absolute;
right: 100px;
top: 10px;
color: #C0C0C0;
cursor: default;
display: inline;
z-index: 9999;
}
/* animations for ngAnimate */
input[reset-field] + .fa.ng-hide-add {
display: inline!important;
-webkit-animation: 0.3s fadeOut;
-moz-animation: 0.3s fadeOut;
-ms-animation: 0.3s fadeOut;
animation: 0.3s fadeOut;
}
input[reset-field] + .fa.ng-hide-remove {
-webkit-animation: 0.5s fadeIn;
-moz-animation: 0.5s fadeIn;
-ms-animation: 0.5s fadeIn;
animation: 0.5s fadeIn;
}
.input-group {
position: relative;
}
.close-icon {
position: absolute;
top: 10px;
right: 100px;
z-index: 6;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<input type="text" class="form-control" />
<i class="fa fa-times-circle ng-hide close-icon"></i>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="fa fa-search"></span> Search
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 4

Code Below Will Work For you
There are modification to your code only.
<!DOCTYPE html>
<html>
<head>
<link data-require="bootstrap#*" data-semver="3.2.0" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.css" />
<link data-require="font-awesome#*" data-semver="4.2.0" rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.css" />
<script data-require="bootstrap#*" data-semver="3.2.0" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.js"></script>
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<div class="panel panel-default">
<div class="panel-body">
<div class="form-group">
<div class="row">
<div class="col-sm-4">
<div class="input-group">
<div class="search-wrapper">
<form>
<input type="text" name="focus" required class="search-box" placeholder="Enter search term" />
<button class="close-icon" type="reset"></button>
</form>
</div>
<span class="input-group-btn">
<button type="button" class="btn btn-default">
<span class="fa fa-search"></span> Search
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
<style>
body {
background-color: #f1f1f1;
font-family: Helvetica,Arial,Verdana;
}
h1 {
color: green;
text-align: center;
}
.redfamily {
color: red;
}
.search-box,.close-icon,.search-wrapper {
position: relative;
padding: 10px;
}
.search-wrapper {
width: 500px;
margin: auto;
margin-top: 50px;
}
.search-box {
width: 80%;
border: 1px solid #ccc;
outline: 0;
border-radius: 15px;
}
.search-box:focus {
box-shadow: 0 0 15px 5px #b0e0ee;
border: 2px solid #bebede;
}
.close-icon {
border:1px solid transparent;
background-color: transparent;
display: inline-block;
vertical-align: middle;
outline: 0;
cursor: pointer;
}
.close-icon:after {
content: "X";
display: block;
width: 15px;
height: 15px;
position: absolute;
background-color: #FA9595;
z-index:1;
right: 35px;
top: 0;
bottom: 0;
margin: auto;
padding: 2px;
border-radius: 50%;
text-align: center;
color: white;
font-weight: normal;
font-size: 12px;
box-shadow: 0 0 2px #E50F0F;
cursor: pointer;
}
.search-box:not(:valid) ~ .close-icon {
display: none;
}
</style>
</body>
</html>