CSS显示内联

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; } .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>