1. #1

    Registered
    17/11/08
    Location
    9000
    Posts
    720
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)

    Knop onbruikbaar maken in CSS

    Hoe kan ik een button disable maken in CSS.


    bijv:

    Code:
     <input class="knopDisable" type="submit" value="OK"/>

    wat moet ik plaatsen in mijn css zodat deze knop wel zichtbaar is maar niet aanklikbaar.

    .knopDisable{
    ???
    }

    Bedankt!
    no votes  

  2. #2
    GigaPixels's Avatar
    Registered
    04/06/11
    Location
    .
    Posts
    1,585
    iTrader
    16 (100%)
    Mentioned
    0 Post(s)
    Reputation
    6/11
    input[disabled] {
    border: 1px solid black;
    background-color: grey;
    cursor: not-allowed;
    }

    of gewoon:

    <input class="knopDisable" type="submit" value="OK" disabled="disabled"/>
    9lives' hack fiasco: 1 | 2 | 3
    no votes  

  3. #3

    Registered
    17/11/08
    Location
    9000
    Posts
    720
    iTrader
    1 (100%)
    Mentioned
    0 Post(s)
    Quote Originally Posted by GigaPixels View Post
    This quote is hidden because you are ignoring this member. Show
    input[disabled] {
    border: 1px solid black;
    background-color: grey;
    cursor: not-allowed;
    }

    of gewoon:

    <input class="knopDisable" type="submit" value="OK" disabled="disabled"/>

    bedankt maar ik de input een class="telaat" gegeven
    en dan via css en de class="telaat" de knop op disable zetten.

    css:

    .telaat {
    }
    no votes  

  4. #4
    Albireo's Avatar
    Registered
    21/10/05
    Location
    Herentals
    Posts
    1,515
    iTrader
    5 (100%)
    Mentioned
    0 Post(s)
    Reputation
    2/13
    Bij mijn weten bestaat er geen manier om de waarde van een attribuut te wijzigen via CSS. Javascript zou daarvoor wel een geschikte manier zijn.

    Je kan de knop echter wel laten verdwijnen via CSS en er iets in de plaats voor zetten dat lijkt op een knop.

    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Disabled button with CSS</title>
    		<style type="text/css">
    			.telaat input {
    				display:  none;
    			}
    			.telaat:after {
    				display: inline;
    				content: 'Unclickable';
    				padding:  10px;
    				background-color: #660000;
    				color: #FFFFFF;
    			}
    		</style>
    	</head>
    	<body>
            <form><p><span class="telaat"><input type="submit" value="OK"></span></p></form>
    	</body>
    </html>
    :before en :after werken niet op een input-element dus <input type="submit" class="telaat" value="OK"> zal niet werken. Ze werken wel met button, maar dan blijft het ook werken als een submitbutton.

    of iets simpeler:
    Code:
    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8">
    		<title>Disabled button with CSS</title>
    		<style type="text/css">
    			input.telaat {
    				display: none;
      			}
    			input[disabled].telaat {
    				display:  inline;
    			}
    		</style>
    	</head>
    	<body>
            <form><p><input type="submit" value="OK" class="telaat" /><input type="submit" value="OK" disabled class="telaat" /></p></form>
    	</body>
    </html>
    Last edited by Albireo; 02-09-2012 at 18:05.
    "And we wept, Precious. We wept to be so alone." --- Gollum
    "Sometimes there are no words. No clever quotes to neatly sum up what happened that day. Sometimes, the day just . . . ends." --- Hotch (Criminal Minds)
    no votes  

Posting Permissions

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

Log in

Log in