在文本字段內重疊字體真棒圖標

在如下面的重疊中，如何防止標題和文本字段之間的大空間？在文本字段內重疊字體真棒圖標

 <h3>Title</h3> 
     <form name="mail_form" id="mail_form" method="POST" action=""> 
      <label for="sendto"> 
      <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a> 
      <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." /> 
      </label> 
     </form>

CSS：

.icon-link-mail { position:relative; left:485px;top:29px; padding: 8px 8px 7px 8px; z-index: 2 }

結果可以在這個fiddle

感謝可見。

來源

2014-03-03 afazolo

你的問題標題不符合你的解釋。標題和文本字段之間的差距是否是問題？ – daveyfaherty

@daveyfaherty是的。 – afazolo

就我個人而言，我只是使用僞元素，但如果你想使用<i>圖標，那麼我們可以通過使用position:absolute而不是position:relative來做到這一點。添加position:relative只是移動圖標，但留下它將採取的空間。 position:absolute不會離開那個空間。

雖然我們需要確保將父容器（標籤）設置爲position:relative，以便該圖標將相對於父代而非整個頁面絕對定位。

HTML

<h3>Title</h3> 
<form name="mail_form" id="mail_form" method="POST" action=""> 
    <label for="sendto"> 
    <a href="#"><i class="icon-envelope icon-2x icon-link-mail" style="color:#E4E4E4; text-decoration:none"></i></a> 
    <input name="sendto" class="sendto" type="text" style="width: 98%; margin-bottom:10px" placeholder="Send to.." /> 
</label> 
</form>

CSS

#mail_form label {position:relative;} 
.icon-link-mail { position:absolute; z-index: 2; right:0;}

結果

enter image description here

小提琴

http://jsfiddle.net/Ay6Hw/4/

來源

2014-03-03 16:26:35

完美。謝謝！ – afazolo

我發現最好的方法是使用圖像。這裏將是代碼：

.search input { 
padding-left: 17px; 
background: #FFF url("../images/icon_search.png") left no-repeat; 
} 
.search input:focus { 
background:#fff; 
}

這也將刪除焦點給用戶整體更好的體驗的背景圖像。

來源

2014-03-03 16:19:38 Soltechy

感謝您的回覆，但我必須首先考慮使用字體真棒圖標的替代方案！ – afazolo

好吧，你總是可以使用：before或者：after psuedo來讓它只用CSS工作。 – Soltechy

這裏是一個簡單的CSS和標準字體真棒語法，不需要Unicode值有效的解決方案，等等。

創建<input>標籤，跟着一個標準的<i>標籤與您需要的圖標。
使用相對定位和更高層順序（z-index）並將圖標移到輸入字段的頂部。
（可選）您可以使圖標處於活動狀態，以便通過標準JS提交數據。

請參閱以下三個HTML/CSS/JS代碼片段。

還是在這裏的jsfiddle相同：例子：http://jsfiddle.net/ethanpil/ws1g27y3/

$('#filtersubmit').click(function() { 
 
    alert('Searching for ' + $('#filter').val()); 
 
});

#filtersubmit { 
 
    position: relative; 
 
    z-index: 1; 
 
    left: -25px; 
 
    top: 1px; 
 
    color: #7B7B7B; 
 
    cursor: pointer; 
 
    width: 0; 
 
}

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet" /> 
 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<input id="filter" type="text" placeholder="Search" /> 
 
<i id="filtersubmit" class="fa fa-search"></i>

來源

2014-11-04 11:29:58 ethanpil

在文本字段內重疊字體真棒圖標

回答

相關問題