Fatal编程技术网
  • html/
  • Html CSS内联显示

Html CSS内联显示

html css twitter-bootstrap

Html CSS内联显示,html,css,twitter-bootstrap,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"

我正在尝试在输入文本中显示关闭图标。与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问题吗

以下是

  • 使图标
    位置：绝对
    ，并用
    右侧
    和
    顶部
    定位

  • 输入组
    已经是
    位置：相对的
    ，图标将相对于它定位自身

  • z-index:2
    将图标置于文本输入上方

现在它将如下所示：

或不带输入组和按钮：

例子 在本例中，我在icon元素上添加了一个类（
.inside
），这样它将只应用于指定的图标

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

.inside{
位置：绝对位置；
顶部：10px；
右：20px；
z指数：2；
}
.输入组.内部{
右：100px；
}

搜寻

您需要添加以下css

.fa-times-circle:before {
    content:"\f057";
    position: absolute;
    right: 90px;
    z-index: 2;
    top: 10px;
}
为
输入组添加相对位置，然后使用
位置：相对移动关闭图标


.input-group {
  position: relative;
}
.close-icon {
  position: absolute;
  top: 10px;
  right: 100px;
  z-index: 6;
}




/*样式在这里*/
/**********************/
/*防止文本出现在图标下方*/
输入[重置字段]{
右侧填充：19px；
}
/*隐藏内置的IE10+清除字段图标*/
输入[重置字段]：-ms清除{
显示：无；
}
/*隐藏搜索类型的取消图标*/
输入[重置字段]：：-webkit搜索取消按钮{
-webkit外观：无；
}
/*图标样式*/
输入[重置字段]+.fa{
位置：绝对位置；
右：100px；
顶部：10px；
颜色：#C0C0；
游标：默认值；
显示：内联；
z指数：9999；
}
/*ngAnimate动画*/
输入[重置字段]+.fa.ng-hide-add{
显示：内联！重要；
-webkit动画：0.3s淡出；
-moz动画：0.3s淡出；
-ms动画：0.3s淡出；
动画：0.3s衰减；
}
输入[重置字段]+.fa.ng-hide-remove{
-webkit动画：0.5s fadeIn；
-moz动画：0.5s fadeIn；
-ms动画：0.5s fadeIn；
动画：0.5s fadeIn；
}
.输入组{
位置：相对位置；
}
.关闭图标{
位置：绝对位置；
顶部：10px；
右：100px；
z指数：6；
}



搜寻

下面的代码适用于您
只有对代码的修改


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




搜寻
身体{
背景色：#f1f1；
字体系列：Helvetica、Arial、Verdana；
}
h1{
颜色：绿色；
文本对齐：居中；
}
雷德家族{
颜色：红色；
}
.搜索框、.关闭图标、.搜索包装器{
位置：相对位置；
填充：10px；
}
.搜索包装器{
宽度：500px；
保证金：自动；
边缘顶部：50px；
}
.搜索框{
宽度：80%；
边框：1px实心#ccc；
大纲：0；
边界半径：15px；
}
.搜索框：焦点{
盒影：0 0 15px 5px#b0eE；
边框：2个实心#bebede；
}
.关闭图标{
边框：1px实心透明；
背景色：透明；
显示：内联块；
垂直对齐：中间对齐；
大纲：0；
光标：指针；
}
.关闭图标：在{
内容：“X”；
显示：块；
宽度：15px；
高度：15px；
位置：绝对位置；
背景色：#FA9595；
z指数：1；
右：35px；
排名：0；
底部：0；
保证金：自动；
填充：2px；
边界半径：50%；
文本对齐：居中；
颜色：白色；
字体大小：正常；
字体大小：12px；
盒影：0 0 2px#E50F0F；
光标：指针；
}
.搜索框：无效~.关闭图标{
显示：无；
}

检查这把小提琴，它无论如何都不会被修复谢谢你的链接，它会给出如何修复输入右侧图标的想法。谢谢你，先生，这就是我需要的东西，你能不能在没有输入组的情况下更新同一件事？@Gayanransinghe-你说的“没有输入组”是什么意思？
为什么不需要输入组？它将输入和按钮保持在一起。是的，如果我想在只有文本框而没有按钮的情况下使用关闭按钮？