CSS显示内联

时间：2014-12-17 06:15:36

标签： html css twitter-bootstrap

我在输入文本中尝试显示关闭图标。苦苦思索CSS问题。我的代码是

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

显示在文本框控件下面而不是在文本框内显示，请你帮我修复css问题

enter image description here

这是 sample plunker

4 个答案:

答案 0 :(得分：3)

  • 制作图标position: absolute，并使用right和top定位。

  • input-group 已经 position:relative，图标会将其自身定位。

  • z-index: 2将图标放在文字输入上方。

现在看起来像这样：

Screenshot

或没有输入组和按钮：

Screenshot

实施例

在这个例子中，我在图标元素上放置了一个额外的类（.inside），以便它只适用于指定的图标。

使用输入组

注意.input-group .inside { right: 100px; }。这确保了当有一个按钮（在输入组内）时，关闭按钮会在右侧获得额外的空间。

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

没有输入组

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>

答案 1 :(得分：1)

Demo

您需要添加以下css 

.fa-times-circle:before {
    content:"\f057";
    position: absolute;
    right: 90px;
    z-index: 2;
    top: 10px;
}

答案 2 :(得分：1)

为input-group添加相对位置，然后使用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>

答案 3 :(得分：1)

以下代码对您有用 您的代码只有修改。

<!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>
相关问题
最新问题