Google Chrome浏览器输入框中字体真棒图标的位置错误
[英]Wrong Positioning of Font Awesome Icon in Input Box in Google Chrome
问题描述
我创建了一个自定义搜索框，在搜索框内的右侧带有一个超赞的字体信息图标。 将鼠标悬停在此图标上，可以为用户提供有关所需输入格式的更多信息。 它确实适用于Firefox和Safari（未经测试的IE），但是在Google Chrome浏览器中，信息图标位于输入框下方。 但是，垂直位置是正确的。
.SearchBox input { flex: 1!important; height: 35px!important; margin: 0px 0 0 0!important; z-index: 100!important; background: #fcfcfc!important; border-top: 1px solid #c4c4c4!important; border-bottom: 1px solid #cecece!important; border-left: 1px solid #cecece!important; border-right: 1px solid #cecece!important; margin-left: 0px!important; font: inherit!important; outline: none!important; /* remove focus ring from Webkit */ line-height: 1.2!important; padding: 5px!important; padding-left: 12px!important; padding-right: 36px!important; width: 100%!important; /* <-- Set size to 100% */ font-size: 15px!important; transition: 0.15s ease-in!important; } .right-inner-addon { position: relative!important; } .right-inner-addon input { padding-right: 30px!important; } .right-inner-addon i { position: absolute!important; right: 1px!important; padding: 10px 8px!important; cursor: pointer!important; } .fa-searchinfo { color: #808287!important; font-size: 11.5pt!important; } .fa-searchinfo:hover { color: #565859!important; font-size: 11.5pt!important; }
<head> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> </head> <div class="SearchBox"> <div class="right-inner-addon"> <input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder="enter ID" value="" /> <a title="Some detailed information about possible input formats." class="fa-searchinfo"><i class="fa fa-info-circle" ></i></a> </div> </div>
2 个解决方案
解决方案1
1 已采纳 2019-02-08 23:44:40
只需用下面的css替换.right-inner-addon我：
.right-inner-addon a {
position: absolute!important;
right: 1px!important;
top:6px!important;
padding: 10px 8px!important;
cursor: pointer!important;
}
.SearchBox input { flex: 1!important; height: 35px!important; margin: 0px 0 0 0!important; z-index: 100!important; background: #fcfcfc!important; border-top: 1px solid #c4c4c4!important; border-bottom: 1px solid #cecece!important; border-left: 1px solid #cecece!important; border-right: 1px solid #cecece!important; margin-left: 0px!important; font: inherit!important; outline: none!important; line-height: 1.2!important; padding: 5px!important; padding-left: 12px!important; padding-right: 36px!important; width: 100%!important; font-size: 15px!important; transition: 0.15s ease-in!important; -webkit-transition: 0.15s ease-in!important; -moz-transition: 0.15s ease-in!important; -ms-transition: 0.15s ease-in!important; } .right-inner-addon { position: relative!important; } .right-inner-addon input { padding-right: 30px!important; } .right-inner-addon a { position: absolute!important; right: 1px!important; top:6px!important; padding: 10px 8px!important; cursor: pointer!important; }
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <div class="SearchBox"> <div class="right-inner-addon"> <input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID" value= "" /> <a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle" ></i></a> </div> </div>
解决方案2
1 2019-02-09 05:18:47
.SearchBox input { flex: 1!important; height: 35px!important; margin: 0px 0 0 0!important; z-index: 100!important; background: #fcfcfc!important; border-top: 1px solid #c4c4c4!important; border-bottom: 1px solid #cecece!important; border-left: 1px solid #cecece!important; border-right: 1px solid #cecece!important; margin-left: 0px!important; font: inherit!important; outline:none!important; /* remove focus ring from Webkit */ line-height: 1.2!important; padding: 5px!important; padding-left: 12px!important; padding-right: 36px!important; width: 100%!important; /* <-- Set size to 100% */ font-size: 15px!important; transition: 0.15s ease-in!important; } .right-inner-addon { position: relative!important; } .right-inner-addon input { padding-right: 30px!important; } .span { float: right; margin-right: 6px; margin-top:-30px; position: relative; z-index: 2; color: red; }
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"> <div class="SearchBox"> <div class="right-inner-addon"> <input name="searchquery" type="text" id="sfq" size="35" maxlength="15000" class="tftextinput2" placeholder= "enter ID"> <a title="Some detailed information about possible input formats." class = "fa-searchinfo" ><i class="fa fa-info-circle span"></i></a> </div> </div>
定位“真棒字体”图标和一个段落
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.