Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 9 of 9
  1. #1
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts

    If input field is not empty show other background

    I have an input field for example

    <input type='text' name='name'/>

    css:

    Code:
        
    input {
            background-image:url(images/namebg.png);
            color:#000;
    }
    But I want the background just be white if the input field is filled in.

  • #2
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    CSS is for styling things. For this task, you're probably going to need something like javascript:
    Code:
    <script type="text/javascript">
    var input = document.getElementById("input");
    input.onchange = function(){
      this.classList.remove("inputBg");
      if(!(this.value = (this.value.split(" ").join("") == "" ? "" : this.value))){
        this.classList.add("inputBg");
      }
    }
    </script>​​​
    Last edited by Nile; 03-27-2012 at 11:11 PM.

  • #3
    New to the CF scene
    Join Date
    Mar 2012
    Posts
    3
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I think u should add width and height for the image in the css for input
    Code:
    input {
            background-image: url(images/namebg.png);
            color: #000;
    	width: [ur-image-size]px;
    	height: [ur-image-size]px;
    	}
    Last edited by Heidel; 03-27-2012 at 11:26 PM.

  • #4
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Quote Originally Posted by Heidel View Post
    I think u should add width and height for the image in the css for input
    Code:
    input {
            background-image: url(images/namebg.png);
            color: #000;
    	width: [ur-image-size]px;
    	height: [ur-image-size]px;
    	}
    That would be changing the height of the input, not the image (and also is unnecessary).

  • #5
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    I agree with Nile and you will need some javascript and I think onkeyup is more appropriate then onchange.

    Code:
            
             <style type="text/css">
                input {
                    background-image: url('bg.jpg'); 
                }
            </style>
    Code:
            <div>
                <input type="text" name="text1" value='' onkeyup="changeBg(this);"/>
            </div>
    
            <script>
                function changeBg(elem){
                    elem.style.backgroundImage = (elem.value != '')?  'none' : "url('bg.jpg')" ;
                }
            </script>
    Last edited by Mishu; 03-28-2012 at 02:02 AM.

  • #6
    Regular Coder
    Join Date
    Sep 2011
    Posts
    116
    Thanks
    1
    Thanked 0 Times in 0 Posts
    The method of Mishu worked, thank you.

  • #7
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    you're welcome.

  • #8
    Regular Coder Nile's Avatar
    Join Date
    Jun 2008
    Posts
    280
    Thanks
    2
    Thanked 46 Times in 46 Posts
    Mine should've worked if you added the proper class into your CSS.

  • #9
    Banned
    Join Date
    Mar 2012
    Posts
    306
    Thanks
    1
    Thanked 28 Times in 28 Posts
    Quote Originally Posted by Nile View Post
    Mine should've worked if you added the proper class into your CSS.
    Sometimes if your code can't be just plugged into other peoples' code you need to explain that to them because it might not be obvious to them. But in any case, you have more code than is really necessary. One line to toggle the background is all that is needed.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •