Bootstrap切換按鈕附加pgn圖像

Question

我想有一組標籤和文本輸入，在文本字段右側有一個可點擊的按鈕。這個按鈕需要是一個切換（點擊時爲灰色，點擊時爲白色），它的logo應該有一個PNG圖像。

我做了一個簡單的代碼片段來展示一下我目前有：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group" style="float:left;"> 
 
    <textarea class="form-control"></textarea> 
 
    <span class="input-group-addon"><a href="#" tabindex="-1" style="width: 100%;"><img class="clIcon btn btn-default" src="http://dummyimage.com/15x15/26bf8f/fff" /></a></span> 
 
    </div> 
 
</div> 
 
<!-- /.col-lg-6 -->

正如你所看到的，我居然按鈕中有一個白色正方形，這是我正在使用的實際切換。我想讓我的開關撥到是這個按鈕在文本區的右側，而不僅是裏面的。

現在，只有那個小的白色方塊是可點擊的，而不是整個按鈕，這是一個問題。我需要整個按鈕是可點擊的並且像切換（開/關）一樣。我使用此切換來激活或停用其他頁面中的網址預覽。當加載其他頁面時，客戶端必須能夠查看預覽是否處於活動狀態，並且按鈕的顏色（如任何切換）。

你有什麼想法嗎？謝謝。

---

UPDATE

外觀我想是基本的自舉的樣子，就像你可以在the official documentation examples，其中Go!按鈕將是一個鏈接，而Go!文本由.png圖像替換看到。

如果可能的話，我想使用默認引導類而不是在它之上構建我自己的CSS或替換它，因爲我想要與其他表單一致，我使用官方引導類來獲得相同的外觀（例如正常的按鈕）。

Answer 1

首先，您沒有按照正確的順序參考腳本。

的jQuery應bootstrap.js

這裏以前被引用爲<textarea>，並與裏面的圖片鏈接和 「按鈕」 是調整<textarea>https://jsfiddle.net/vmferrtx/4/

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/> 
 
     
 
    <br><br> 
 
    <div class="col-lg-6"> 
 
    <div class="input-group"> 
 
    <textarea class="form-control"></textarea> 
 
    <span class="input-group-addon input-group-btn"> 
 
     <a href="#" class="link-button-right btn btn-default" type="button"> 
 
      <img class="clIcon" src="http://dummyimage.com/15x15/26bf8f/fff" /> 
 
     </a> 
 
     </span> 
 
    </div> 
 
    <!-- /input-group --> 
 
</div> 
 
<!-- /.col-lg-6 -->

與resizible位的css：

.link-button-right { 
     height: 100%; 
     position: relative; 
     width: 50px; 
    } 

    .input-group-addon { 
     position: relative; 
     padding: 0; 
     border: none; 
    } 

    .clIcon { 
     position: absolute; 
     top: 50%; 
     left: 50%; 
     transform: translate(-50%, -50%); 
    } 

Answer 2

不幸的是，你要求的東西很難用你試圖使用的bootstrap構造實現。如果不將CSS大幅改爲.input-group-addon課程或使用javascript進行補充，我無法做到這一點。下面是javascript版本，但你可能完全從頭開始構建這個東西，忘記組插件部分（它使用display:table，這導致按鈕填充整個區域時出現問題）。

在下面的示例中，我使用<label>來使整個區域可點擊。我還包含一個<input type="checkbox">來創建可切換狀態。那麼這只是使用label input[type=checkbox]:checked + whatever { ... }的一些變化來更改背景顏色和應用其他樣式的問題。 javascript部分只是設置複選框的父級背景顏色，因爲我可以使按鈕圖像的全寬和高度不需要display: table的.input-group-addon和公司。結果是我認爲你想要的，但一點也不乾淨，很好。同樣，我建議只從頭開始，不要使用引導程序的輸入組插件。

我也用!important而不是添加規則:focus，:active，:hover，天知道還有什麼引導增加了扔在那些惱人的盒子陰影和輪廓。我不建議在生產中這樣做。

$('label.input-group-addon input[type=checkbox]').on('change', function(){ 
 
    $(this).closest('label').each(function(){ 
 
    $(this).css('background', $('.btn', this).css('background')); 
 
    }); 
 
}).trigger('change');

label.input-group-addon { 
 
    cursor: pointer; 
 
} 
 

 
label.input-group-addon .btn { 
 
    border: none; 
 
    outline: none!important; 
 
    box-shadow: none!important; 
 
} 
 

 
label.input-group-addon .btn:hover { 
 
    background: white; 
 
} 
 

 
label.input-group-addon input:checked + .btn { 
 
    background: #d4d4d4; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" /> 
 
<br> 
 
<br> 
 
<div class="col-lg-6"> 
 
    <div class="input-group" style="float:left;"> 
 
    <textarea class="form-control"></textarea> 
 
    <label class="input-group-addon"> 
 
     <input type="checkbox" tabindex="-1" class="sr-only"> 
 
     <img class="clIcon btn btn-default" src="http://dummyimage.com/15x15/26bf8f/fff" /> 
 
    </label> 
 
    </div> 
 
</div>