【问题标题】: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;
}
【解决方案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
}