【问题标题】:Input text field with close button使用关闭按钮输入文本字段
【发布时间】:2015-05-11 10:56:02
【问题描述】:

我只想在右上角创建一个带有小 x(关闭)按钮的输入文本字段。请帮助我如何在 css3 或 bootstrap 3 中完成它。谢谢

【问题讨论】:

标签: javascript html css twitter-bootstrap-3


【解决方案1】:

这是一个简单的demo

html:

<input type="text"><span class="close-icon">x</span>

css:

    .close-icon{
       position:relative;
       left: -14px;
       top: -4px;
    }

【讨论】:

  • 感谢您的支持,能否请您为我制作相同的输入字段??这是链接desmos.com/calculator
【解决方案2】:

Check this

HTML

<div class="main-content">
     <a href="javascript:void(0);" class="close">X</a>
   Dummy Text will be here..  Dummy Text will be here.. 
</div>

css

.main-content{
    border:1px solid #aaa;
    height:200px;
    width:50%;
    position:relative;
    padding:10px;
    font-family: arial;
    font-size:12px;
}
.close{
    position: absolute;
    right:5px;
    top:5px;
    text-decoration: none;
    font-family: arial;
    color:#fff;
    background-color: #aaa;
    padding:3px 5px
}

【讨论】:

  • 感谢您的支持,能否请您为我制作相同的输入字段??这是链接desmos.com/calculator
猜你喜欢
  • 2015-07-08
  • 2018-11-11
  • 1970-01-01
  • 1970-01-01
  • 2021-02-16
  • 1970-01-01
  • 1970-01-01
  • 2020-04-25
  • 2016-10-31
相关资源
最近更新 更多