Question

我想要一组标签和文本输入，文本字段右侧有一个可点击按钮。此按钮需要是一个切换（点击时为灰色，未点击时为白色），并且应该有一个png图像。

我已经制作了一个简单的代码段来向您展示我目前拥有的内容：

＆＃13;

<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 -->

＆＃13;

正如你所看到的，我的按钮实际上有一个白色方块，这是我正在使用的实际切换。我希望我切换到是文本区域右侧的按钮，而不仅仅是在其中。

现在，只有那个小的白色方块可以点击，而不是整个按钮，这是一个问题。我需要整个按钮可以点击并像切换一样（打开/关闭）。我使用此切换来激活或停用另一页面中的URL预览。客户必须能够在加载其他页面时查看预览是否处于活动状态，具有按钮的颜色（如任何切换）。

你有什么想法吗？谢谢。

更新

我想要的外观是基本的Bootstrap外观，就像你在the official documentation examples中看到的那样，其中Go!按钮是一个链接，Go!文本被一个{替换{1}}图片。

如果可能的话，我想使用默认的bootstrap类而不是在它上面构建我自己的CSS或者替换它，因为我希望与其他表单保持一致，我使用官方引导类来获取相同的外观（例如普通按钮）。

Answer 1

首先，您没有按正确的顺序引用脚本。

应该在bootstrap.js之前引用jQuery

这是<textarea>并与其中的图片和＆＃34;按钮＆＃34;在调整<textarea> https://jsfiddle.net/vmferrtx/4/

的大小时可以恢复

＆＃13;

    <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 -->

＆＃13;

有一点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的{{1}}和公司。结果是我认为你想要的，但完全没有干净和漂亮的方式。同样，我建议从头开始，而不是使用bootstrap的输入组插件。

我还使用.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;
}

带有pgn图像的Bootstrap切换按钮插件

2 个答案: