在文本框中添加疊加按鈕

-1

在我的web應用程序中，我有幾個輸入字段。當用戶將鼠標懸停在輸入項目上時，我希望能夠在輸入字段的右下角顯示一個小圖標按鈕，並且當用戶按下它時，我想能夠顯示帶有字段的引導彈出窗口以添加註釋。在文本框中添加疊加按鈕

我不知道如何在輸入字段上放置一個按鈕。

如果我能做到這一點，我可以輕鬆地添加酥料餅，並顯示懸停等

我是否需要設置

z-index: 100

什麼？

來源

2013-10-09 Steve Robinson

那麼，你試過什麼代碼？ – LinkinTED

根據您現有的代碼的一種方法是在錨上設置負邊距。

a { margin-left: -16px; }

看這個更新小提琴：http://jsfiddle.net/WTpPH/1/

的另一種方式可以是包裹在輸入和在一個div錨被相對定位。然後，您可以在錨上使用絕對定位，以將其恰好放在您想要的div的相關位置。儘管如此，你需要仔細設置寬度。

a { position: absolute; right: 4px; top: 4px; ... }

看到這個更新小提琴：http://jsfiddle.net/WTpPH/2/

來源

2013-10-09 12:33:40 Abhitalks

非常感謝。我在''有這個，所以我用它。謝謝。 –

可以使用position:absolute;與z-index這樣的：

HTML

<div> 
<input type="text"></input> 
<a href='#'>c</a> 
</div>

CSS

div{ 

    position:relative; 
} 

input{ 
    position:absolute; 
} 

a{ 
    background-color:red; 
    position:absolute; 
    left:10px; 
    top:3px; 
}

jsFiddle

來源

2013-10-09 12:34:26

非常感謝。這是一個非常簡單而不錯的解決方案。 –

input { 
    position:relative; 
    z-index:9999999999999999; 
} 
.cc { 
    position:absolute; 
    left:155px; 
    top:15px; 
    z-index:9999999999999999999999999; 
    display:none; 
}

顯然z-index過度誇大>：d。重點是elements必須有一個定義position和z-indexa必須高於其餘。

$('input').focus(function() { 
    $('.cc').show(); 
}).focusout(function() { 
    $('.cc').hide(); 
});

FIDDLE

來源

2013-10-09 12:39:13 Spokey

謝謝..這個解決方案也很棒。 –

這裏是一個更自引導友好的方式..

 <form role="search"> 
     <div class="input-group add-on"> 
      <input type="text" class="form-control"> 
      <div class="input-group-btn"> 
      <button class="btn btn-default" type="submit" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Hello popover content."><strong>?</strong></button> 
      </div> 
     </div> 
     </form>

CSS的按鈕左移：

.add-on .input-group-btn > .btn { 
    border-left-width:0;left:-2px; 
    -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075); 
}

工作演示：http://bootply.com/86596

來源

2013-10-09 12:41:15 ZimSystem

在文本框中添加疊加按鈕

回答

相關問題