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>