width and height functions not working in this

Question

I have made a file upload form and am trying to change the size of it in css. I can change the color but the height and width aren't changing

HTML:

<form action="gogogo.php" method="post" enctype="multipart/form-data">
<label class="filebutton">
Upload
<span><input type="file" id="myfile" name="myfile" onchange="this.form.submit();"></span>
</label>

CSS:

label.filebutton {
width:300px;
height: 100px;
overflow:hidden;
position:relative;
background-color:#FF9933;
}

label span input {
z-index: 999;
line-height: 0;
font-size: 50px;
position: absolute;
top: -2px;
left: -700px;
opacity: 0;
filter: alpha(opacity = 0);
-ms-filter: "alpha(opacity=0)";
cursor: pointer;
_cursor: hand;
margin: 0;
padding:0;
width: 50px;
}

possible duplicate of [How can I control the width of a label tag?](http://stackoverflow.com/questions/2820586/how-can-i-control-the-width-of-a-label-tag) — James Montagne, Dec 20 '14 at 05:56

score 1 · Answer 1 · answered Dec 20 '14 at 05:52

1

add display:block; or display:inline-block; to css label.filebutton

working demo http://jsfiddle.net/ho21b4Lf/

answered Dec 20 '14 at 05:52

Alien

3,658
1
16
33

Sorry just one other question: When i put the mouse cursor over the button it doesn't show the hand cursor which it usually goes to on buttons, and just stays as the normal cursor. Do you know how I can fix this? – nickelton6 Dec 20 '14 at 06:04

rnrneverdies · Answer 2 · 2014-12-20T07:25:24.287

By default <lablel> has display:inline. Inline objects don't have heights or widths.

So set display:block; or display:inline-block;

label.filebutton {
  display: block;
  width: 250px;
  height: 100px;
  overflow: hidden;
  position: relative;
  background-color: #FF9933;
}


label span input {
  z-index: 999;
  line-height: 0;
  font-size: 50px;
  position: absolute;
  top: -2px;
  left: -700px;
  opacity: 0;
  filter: alpha(opacity=0);
  -ms-filter: "alpha(opacity=0)";
  cursor: pointer;
  _cursor: hand;
  margin: 0;
  padding: 0;
  
}

<form action="gogogo.php" method="post" enctype="multipart/form-data">
  <label class="filebutton">
    Upload
    <span><input type="file" id="myfile" name="myfile" onchange="this.form.submit();"/></span>
</label>

width and height functions not working in this

2 Answers2