I am trying to change the width of an input (button) via CSS/ Can i do this?
this is my code that failed...
<style type="text/css">
input
{width:10px;}
</style>
<input type="button" value="OOOOOOOOOOOOOOOO" onmouseover="style='width:100%'">
by 
jkb3614
ANSWERS: 3
-
Try input.button {width:XXpx;} 10px is pretty small....
-
You've specified the button width twice: once in the <style> tag and once in the <input> tag. I'm pretty sure the spec in the input tag takes precedence, so the 10px width should not be evaluated. The "width:100%" means that the button should have the same width as its parent element IIRC. Is this what you want? I recommend getting rid of inline styles and using an external stylesheet instead. I find it cuts down on confusion and makes for less typing. Your mileage may vary.
-
Try this: <style type="text/css"> <!-- .button { display: inline-block; width: 120px; } .button:hover { width: 100%; } --> </style> <input type="button" class="button" value="Button" /> Try to avoid using inline CSS or Javascript. If you needed to use Javascript, you could do this, but I still highly recommend using CSS instead: <input type="button" class="button" value="Button" onmouseover="this.style.width='100%';" /> Good luck!
RELATED QUESTIONS
Copyright 2023, Wired Ivy, LLC