【问题标题】:HTML / CSS How to add image icon to input type="button"?HTML / CSS 如何将图像图标添加到输入类型 =“按钮”?
【发布时间】:2011-02-24 14:13:15
【问题描述】:

我正在使用下面的 CSS,但它会将图像放在按钮的中心。有什么方法可以使用<input type="button"> 将图标左对齐或右对齐,以便文本和图像很好地对齐和对齐?

background: url('/common/assets/images/icons/16x16/add.png');
background-position:center;
background-repeat:no-repeat;

【问题讨论】:

    标签: html css


    【解决方案1】:

    如果你绝对必须使用input,试试这个:

    background-image: url(...);
    background-repeat: no-repeat;
    background-position: <left|right>;
    padding-<left|right>: <width of image>px;
    

    在内部使用 buttonimg 通常会更容易一些:

    <button type="submit"><img> Text</button>
    

    但是,button 用于提交的浏览器实现不一致,以及在使用button 时发送所有按钮值的事实 - 这会在多提交表单中杀死“单击了什么按钮”检测。

    【讨论】:

    • 不必这样做,但我这里的按钮标签在 ie 6 中有错误或在某些浏览器中表现不同?
    • 就我的经验而言,button(类型为submit)与input 的工作方式相同,除了允许在其中使用元素(而不仅仅是应用于它的样式)。
    • IE 的&lt;button&gt; 实现的“错误”部分来自以下事实:1)在 POST / GET 上,它为每个按钮提交“值”,而不仅仅是单击的那个,并且2) IE 喜欢发送按钮的内容(内部 HTML),而不是发送实际的 value 属性。如果采取的操作取决于用户单击的按钮,这些事实会使&lt;button&gt; 标记不可靠。
    • 很好,杜罗斯。是的,这对于具有“预览”和“提交”等功能的编辑帖子表单之类的东西来说无疑是一个不错的选择。
    • 您可以交替使用&lt;button&gt;&lt;input type=button&gt;。如果您不想
    【解决方案2】:

    假设您的按钮图像为 16 x 16 像素,这应该可以满足您的需求。

    <input type="button" value="Add a new row" class="button-add" />
    
    input.button-add {
        background-image: url(/images/buttons/add.png); /* 16px x 16px */
        background-color: transparent; /* make the button transparent */
        background-repeat: no-repeat;  /* make the background image appear only once */
        background-position: 0px 0px;  /* equivalent to 'top left' */
        border: none;           /* assuming we don't want any borders */
        cursor: pointer;        /* make the cursor like hovering over an <a> element */
        height: 16px;           /* make this the size of your image */
        padding-left: 16px;     /* make text start to the right of the image */
        vertical-align: middle; /* align the text vertically centered */
    }
    

    示例按钮:

    更新

    如果你碰巧使用了 Less,这个 mixin 可能会派上用场。

    .icon-button(@icon-url, @icon-size: 16px, @icon-inset: 10px, @border-color: #000, @background-color: transparent) {
        height: @icon-size * 2;
        padding-left: @icon-size + @icon-inset * 2;
        padding-right: @icon-inset;
        border: 1px solid @border-color;
        background: @background-color url(@icon-url) no-repeat @icon-inset center;
        cursor: pointer;
    }
    
    input.button-add {
        .icon-button("http://placehold.it/16x16", @background-color: #ff9900);
    }
    

    上面编译成

    input.button-add {
      height: 32px;
      padding-left: 36px;
      padding-right: 10px;
      border: 1px solid #000000;
      background: #ff9900 url("http://placehold.it/16x16") no-repeat 10px center;
      cursor: pointer;
    }
    

    JSFiddle

    【讨论】:

    【解决方案3】:
    <button type="submit" style="background-color:transparent; border-color:transparent;"> 
      <img src="images/button/masuk.png" height="35"/>
    </button>
    <button type="reset" style="background-color:transparent; border-color:transparent;"> 
      <img src="images/button/reset.png" height="35"/>
    </button>
    

    希望对你有帮助。

    【讨论】:

      【解决方案4】:

      如果您使用 spritesheets,这将变得不可能,并且必须包装元素。

      .btn{
          display: inline-block;
          background: blue;
          position: relative;
          border-radius: 5px;
      }
      .input, .btn:after{
          color: #fff;
      }
      .btn:after{
          position: absolute;
          content: '@';
          right: 0;
          width: 1.3em;
          height: 1em;
      }
      .input{
          background: transparent;
          color: #fff;
          border: 0;
          padding-right: 20px;
          cursor: pointer;
          position: relative;
          padding: 5px 20px 5px 5px;
          z-index: 1;
      }
      

      看看这个小提琴:http://jsfiddle.net/AJNnZ/

      【讨论】:

        【解决方案5】:

        您可以尝试在按钮内插入图片 http://jsfiddle.net/s5GVh/1415/

        <button type="submit"><img src='https://aca5.accela.com/bcc/app_themesDefault/assets/gsearch_disabled.png'/></button>
        

        【讨论】:

          【解决方案6】:

          我会这样做:

          使用按钮类型

           <button type="submit" style="background-color:rgba(255,255,255,0.0); border:none;" id="resultButton" onclick="showResults();"><img src="images/search.png" /></button>
          

          我使用了背景色:rgba(255,255,255,0.0);这样按钮的原始背景颜色就会消失。与边框相同:无;它会带走原来的边框。

          【讨论】:

            【解决方案7】:

            你可以试试这个技巧!

            1st) 这样做:

            <label for="img">
               <input type="submit" name="submit" id="img" value="img-btn">
               <img src="yourimage.jpg" id="img">
            </label>
            

            第二)风格它!

            <style type="text/css">
               img:hover {
                   cursor: pointer;
               }
               input[type=submit] {
                   display: none;
               }
            </style>
            

            它不干净,但它会做的工作!

            【讨论】:

              【解决方案8】:

              这里只是在按钮元素中添加图标

                 <button class="social-signup facebook"> 
                   <i class="fa fa-facebook-official"></i>  
                    Sign up with Facebook</button>
              

              【讨论】:

                【解决方案9】:

                这是所需的最小样式,使图像适合默认按钮大小:

                &lt;input type="button" value=" " style="background-image: url(http://www.geppoz.eu/geppoz.png);background-size:100% 100%;"&gt;

                需要“间隔”值来保持基线对齐,以防万一您需要它...

                【讨论】:

                  【解决方案10】:

                  sshow 的回答也帮了我:

                  navigation.css

                  [...]
                  
                  .buttonConfiguration {
                      width: 40px;
                      background-color: red; /* transparent; */
                      border: none;
                      color: white;
                      padding: 5px 10px;
                      text-align: center;
                      text-decoration: none;
                      display: inline-block;
                      font-family: corbel;
                      font-size: 12px;
                      font-weight: normal;
                      margin: 1px 1px;
                      cursor: pointer;
                  
                      background-image: url('../images/icons5/gear_16.png');
                      background-position: center; /* 0px 0px; */
                      background-repeat: no-repeat;
                      vertical-align: middle;
                  }
                  
                  [...]
                  

                  frameMenu.php

                  [... PHP, Javascript and HTML code ...]
                  
                  <!-- <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonSuperAdmin" value="<?= $oLanguage->getExpression('confSettings', 'title', 'C e n t e r s') ?>"></a> -->
                  <li><a target="frameBody" href="admin/conf/confFunctions.php"><input type="button" class="buttonConfiguration" value=""></a>
                  <ul>
                  <li><a target="frameBody" href="admin/conf/getglobals.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('centerSettings', 'confAdmin1', 'GetGlobals') ?>"></a></li>
                  <li><a target="frameBody" href="admin/conf/getcwd.php "><input type="button" class="buttonSuperAdminSub" value="<?= $oLanguage->getExpression('confSettings', 'centerAdmin2', 'GetCWD') ?>"></a></li>
                  </ul>
                  </li>
                  
                  [...]
                  

                  我已在最新版本的 Firefox 和 Chrome 下成功测试(截至 2019 年 2 月 9 日)。

                  【讨论】:

                    【解决方案11】:

                    这对我来说效果很好,我也在处理悬停和单击 CSS(通过更改背景颜色):

                    HTML(这里显示 2 张图片,image1 在 image2 之上):

                    <button class="iconButton" style="background-image: url('image1.png'), url('image2.png')"
                      onclick="alert('clicked');"></button>
                    

                    CSS(我的图像是 32px X 32px,所以我给了它们 4px 用于填充和 5px 边框四舍五入):

                    .iconButton {
                        width: 36px;
                        height: 36px;
                        background-color: #000000;
                        background-position: center;
                        background-repeat: no-repeat;
                        border: none;
                        border-radius: 5px;
                        cursor: pointer;
                        outline: none;
                    }
                    
                    .iconButton:hover {
                        background-color: #303030;
                    }
                    
                    .iconButton:active {
                        background-color: #606060;
                    }
                    
                    button::-moz-focus-inner {
                        border: 0;
                    }
                    

                    【讨论】:

                      【解决方案12】:
                      <img src="http://www.pic4ever.com/images/2mpe5id.gif">
                                  <button class="btn btn-<?php echo $settings["button_background"]; ?>" type="submit"><?php echo $settings["submit_button_text"]; ?></button>
                      

                      【讨论】:

                      • 请为您的答案添加解释。
                      • 需要一个">"来关闭img标签。
                      • 你为什么使用 PHP?
                      猜你喜欢
                      • 1970-01-01
                      • 2016-03-27
                      • 2013-11-18
                      • 2014-04-06
                      • 2017-12-04
                      • 2020-05-04
                      • 1970-01-01
                      • 2020-07-08
                      • 2012-04-26
                      相关资源
                      最近更新 更多