发表新帖
发表新帖

HTML5 image icon to input placeholder

后端 未结
关注
5 1981
一整个雨季
一整个雨季 2020-11-30 02:51

I\'d like to add an image icon to an input placeholder, like in this picture: \"enter

相关标签:
5条回答
  • 青春惊慌失措
    2020-11-30 03:11
    1. You can set it as background-image and use text-indent or a padding to shift the text to the right.
    2. You can break it up into two elements.

    Honestly, I would avoid usage of HTML5/CSS3 without a good fallback. There are just too many people using old browsers that don't support all the new fancy stuff. It will take a while before we can drop the fallback, unfortunately :(

    The first method I mentioned is the safest and easiest. Both ways requires Javascript to hide the icon.

    CSS:

    input#search {
    background-image: url(bg.jpg);
    background-repeat: no-repeat;
    text-indent: 20px;
}

    HTML:

    <input type="text" id="search" name="search" onchange="hideIcon(this);" value="search" />

    Javascript:

    function hideIcon(self) {
    self.style.backgroundImage = 'none';
}

    September 25h, 2013

    I can't believe I said "Both ways requires JavaScript to hide the icon.", because this is not entirely true.

    The most common timing to hide placeholder text is on change, as suggested in this answer. For icons however it's okay to hide them on focus which can be done in CSS with the active pseudo-class.

    #search:active { background-image: none; }

    Heck, using CSS3 you can make it fade away!

    http://jsfiddle.net/2tTxE/

    November 5th, 2013

    Of course, there's the CSS3 ::before pseudo-elements too. Beware of browser support though!

                Chrome  Firefox     IE      Opera   Safari
:before     (yes)   1.0         8.0     4       4.0
::before    (yes)   1.5         9.0     7       4.0

    https://developer.mozilla.org/en-US/docs/Web/CSS/::before

    0 讨论(0)
  • 执笔经年
    2020-11-30 03:16

    Adding to Tim's answer:

      #search:placeholder-shown {
     // show background image, I like svg
    0 讨论(0)
  • 盖世英雄少女心
    2020-11-30 03:19

    `CSS:

    input#search{
 background-image: url(bg.jpg);
 background-repeat: no-repeat;
 text-indent: 20px;
}

input#search:focus{
 background-image:none;
}

    HTML:

    <input type="text" id="search" name="search" value="search" />`
    0 讨论(0)
  • 北海茫月
    2020-11-30 03:22 
    <html>
<head>
<style> 
input[type=text] {
    width: 50%;
    box-sizing: border-box;
    border: 2px solid #ccc;
    border-radius: 4px;
    font-size: 16px;
    background-color: white;
    background-image: url('searchicon.png');
    background-position: 10px 10px; 
    background-repeat: no-repeat;
    padding: 12px 20px 12px 40px;
}
</style>
</head>
<body>

<p>Input with icon:</p>

<form>
  <input type="text" name="search" placeholder="Search..">
</form>

</body>
</html>
    0 讨论(0)
  • 粉色の甜心
    2020-11-30 03:23

    I don't know whether there's a better answer out there as time goes by but this is simple and it works;

    input[type='email'] {
  background: white url(images/mail.svg) no-repeat ;
}
input[type='email']:focus {
  background-image: none;
}

    Style it up to suit.

    0 讨论(0)
 看不清?
提交回复
热议问题