www.webdeveloper.com
Results 1 to 3 of 3

Thread: Styling form buttons with CSS

  1. #1
    Join Date
    Jun 2010
    Posts
    6

    Styling form buttons with CSS

    Hi there,

    Hope someone can help me with this one! I've got an image array with 'prev' and 'next' form buttons on javascript. I want to style the buttons with CSS so that they change colour when they become 'disabled'. So far, I've styled 'next' but the colour won't change when it's on disabled mode.

    THANK YOU!!!



    Code:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Untitled Document</title>
    <script type="text/javascript">
    	
    	var imgSet = ['A.jpg','B.jpg','C.jpg','D.jpg','E.jpg'];
    	var imgPath = "images/btb/";
    	var nPgs = imgSet.length-1;
    	var pg = 0;
    				
    	function turnPage(direction){
    		
    		if (direction == 'next')
    			{
    			 if (pg >= 0){document.getElementById('prevBtn').disabled = false}
    			 if (pg < nPgs){pg++}
    		         if (pg == nPgs){document.getElementById('nextBtn').disabled = true}
    			}
    			
    		if (direction == 'prev')
    			{
    			 if (pg >= 1){pg--}
    			 if (pg < nPgs){document.getElementById('nextBtn').disabled = false} 
    			 if (pg == 0){document.getElementById('prevBtn').disabled = true}
    		        }
    		document.getElementById('swapImg').src = imgPath+imgSet[pg];
    	} 
    
    </script>
    <style type="text/css">
    <!--
    input.fw {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	color: #00CCFF;
    	width: 40px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	background-color: #FFFFFF;
    }
    input.fwhov {
    	font-family: Verdana, Arial, Helvetica, sans-serif;
    	font-size: 10pt;
    	color: #00CCFF;
    	width: 40px;
    	border-top-style: none;
    	border-right-style: none;
    	border-bottom-style: none;
    	border-left-style: none;
    	background-color: #FFFFFF;
    	text-decoration: underline;
    }
    -->
    </style>
    </head>
    
    <body>
    <center>
    <br>
    <Img id='swapImg' Src='images/btb/A.jpg'>
    <br>
    <br>
    <input type='button' id='prevBtn' value='Previous' onClick="turnPage('prev')" disabled>
    <input type='button' class="fw" id='nextBtn' onmouseover="this.className='fw fwhov'" onmouseout="this.className='fw'" onClick="turnPage('next')" value='Next'>
    </center>
    </body>
    </html>

  2. #2
    Join Date
    Apr 2003
    Location
    Netherlands
    Posts
    21,654
    Code:
    input[disabled] {background-color:red;}

  3. #3
    Join Date
    Jun 2010
    Posts
    6
    Thank you, fang!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles