Doing a Input Type="Text" with CSS3 and Fixed Image on the Background

Doing a input type=text with CSS3 and fixed image on the background

You can use a submit button with a background-image and position it over the searchbox.

Do not forget to add padding to the right of your input box to allow for the button without overlap. (i have also added a class to your search box so the rules do not target the same elements)

Html

<form id="header-search">
    <input type="text" class="searchbox" /><input type="submit" class="button" value="" />
</form>

Css

#header-search{overflow:auto;}

#header-search input.searchbox {
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     border:1px solid #8e8e8e;
     background-color:#f5f5f5;
     height:16px;
     padding:4px;
     padding-right:28px;
     color:#4a4a4a;
     float:left;
 }

#header-search input.button{
    border:0;
    padding:0;
    margin:0 0 0 -24px;
    width:24px;
    height:24px;
    background:transparent url('your-search-icon-path-here') center center  no-repeat;
    float:left;
}

the end result is

demo http://jsfiddle.net/gaby/F5Nmp/1/

html input with background image

Set the padding-left to a greater value on your inputs, and decrease the width of your textarea.

When you're designing your form it would be good to put a temporary border around your inputs to see where they are actually positioned, and when you're done just take it off.

Background-image vs. input type text how to set size

You can set background-size to 100% 100%, background-position to 50%, background-repeat to no-repeat

.background {  background-image: url("http://icons.iconarchive.com/icons/paomedia/small-n-flat/1024/sign-check-icon.png");  background-size: 100% 100%;  background-position: 50%;  background-repeat: no-repeat;}

<input type="text" class="background" />

Hide title text on input where type=image

<input/>:

type="image": A graphical submit button. You must use the src attribute to define the source of the image and the alt attribute to define alternative text. You can use the height and width attributes to define the size of the image in pixels.

^{(Emphasis mine)}

Your HTML, therefore, is invalid. You need your button to look like in the snippet below.

If you already toggle the class onclick with JavaScript, I’d suggest you drop the CSS rules and instead change the image src directly. Whether you make your toggle dependent on the class, the alt or the src attribute, is your choice.

document.getElementById('mToggle').addEventListener('click',function(){  if(this.className=='left'){    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-right-arrow-64-000000.png';    this.alt='→';    this.className='right';  }  else{    this.src='http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png';    this.alt='←';    this.className='left';  }});

<input id="mToggle" class="left" type="image" width="64" height="64"  src="http://uxrepo.com/static/icon-sets/flat-arrows/png32/64/000000/flat-circle-chevron-left-arrow-64-000000.png"  alt="←" value=" " title="new toggle button"/>

How to fix position of background image?

You can do something like this in CSS:

.search  input {
   background-size: 30px 17px;
   background-repeat: no-repeat;
   background-position: left;
   transition: .3s;
   background-image: url("https://i.stack.imgur.com/VtucQ.jpg");
 }

.search input:focus {
     background-position: left 50px; 
  }

and html

<div class="search">
    <input>
</div>

Background size is 30x17 beacuse image will not lose ratio. And on focus just animate position from image to hide it.

Put icon inside input element in a form

The site you linked uses a combination of CSS tricks to pull this off. First, it uses a background-image for the <input> element. Then, in order to push the cursor over, it uses padding-left.

In other words, they have these two CSS rules:

background: url(images/comment-author.gif) no-repeat scroll 7px 7px;
padding-left:30px;

How to set src attribute of [input=image] by external css

Since CSS is not a must, then javascript is here to do the job.

example , setting your dataUri inside an array and and a loop on your inputs to update the src attribute:

// set an array with each of your dataUris
const img =new Array ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==' ,
' data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==',

'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==');

// reset src attributes from dataUri stored in img()
let myIpts =document.querySelectorAll('input[id^="imgBtn"]');
for (i = 0; i < myIpts.length; i++) {
  myIpts[i].setAttribute('src', img[i] );
}

<html>
<style>

</style>

<body>
  <input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg=="
    alt="Opss">
  <label for="imgBtn1">btn1 - att src</label>
  <br>
  <input id="imgBtn2" type="image" class="img2" alt="Opss">
  <label for=" imgBtn2 ">btn2 - by css class</label>
  <br>
  <input id="imgBtn3" type="image" class="img3" alt="Opss">
  <label for="imgBtn3 ">btn3 - by css class</label>
</body>

</html>

How to add background image for input type=button?

You need to type it without the word image.

background: url('/image/btn.png') no-repeat;

Tested both ways and this one works.

Example:

<html>
    <head>
        <style type="text/css">
            .button{
                background: url(/image/btn.png) no-repeat;
                cursor:pointer;
                border: none;
            }
        </style>
    </head>
    <body>
        <input type="button" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="image" name="button" value="Search" onclick="showUser()" class="button"/>
        <input type="submit" name="button" value="Search" onclick="showUser()" class="button"/>
    </body>
</html>

Background color in input and text fields

input[type="text"], textarea {

  background-color : #d1d1d1; 

}

Hope that helps :)

Edit: working example, http://jsfiddle.net/C5WxK/

The way to use background-image in css files with Django

Use this:

    #third{
     background: url("/static/img/sample.jpeg") 50% 0 no-repeat fixed;
     color: white;
     height: 650px;
     padding: 100px 0 0 0;   
     }

Most probably This will work.Use "/static/" before your image URL and then try them. Thanks

---

Related Topics