Style Upload button

Still the css code applied to it doesnt change anything. Actually the only parameter that works is “width” but then the whole button isnt clickable thou.

I’m working on it on localhost but I can insert the code:

<div id="cframe">
<ul id="contact">
<li><span class="text">Your Name</span><span class="required">(*)</span> [text* your-name]</li>
<li><span class="text">Your Email</span><span class="required">(*)</span>[email* your-email] </li>
 <li><span class="text">Subject</span>[text your-subject] </li>
<li id="message"><span class="text">Message</span>[textarea your-message] </li>
 <li><div class="textt">File (.doc, .docx, .pdf, .txt, .rtf, .odt, .xls, .tmx), max. 5MB</div>
<div id="load">[file file-14 id:filee class:att limit:5000000 filetypes:doc|docx|txt|rtf|pdf|odt|xls|tmx]</div></li>
<li id="submit">[submit "Order translation"]</li>
</ul>

CSS

#cframe{width:100%; height:380px; background:#fff url('http://engleash.net/wp-content/themes/accentbox/images/button.png') no-repeat;}
#contact{
	list-style:none;
	margin:0;
padding-left:100px;
padding-top:40px;
}
#contact li{
	float: left;
    height: 40px;
	margin:0 0 0px;
    position: relative;
    width: 540px;
}
.textt {padding-left:5px;margin-top:5px; background-color:#666; width:410px; color:#fff; font-weight:bold}
#contact li .text{
	background: #d2ddea;
	padding:7px 5px 5px 0;
	position:absolute;
	z-index:100;
	min-width:85px;
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:5px;
	-webkit-border-bottom-right-radius:5px;
	border-top-left-radius: 5px;
	-moz-border-radius-topleft:5px;
	-webkit-border-top-left-radius:5px;
	text-indent: 5px;
}

#contact li .wpcf7-form-control-wrap{
	position: absolute;
}
#contact li .wpcf7-form-control-wrap input, #contact li .wpcf7-form-control-wrap textarea{
	background:#e1eaf6;
	border:solid 5px #d2ddea;
	border-radius:5px;
	-moz-border-radius:5px;
	-webkit-border-radius:5px;
	padding:5px 10px 5px;
	width: 400px;
	text-indent:85px;
	z-index:100;
	margin:0;
}
#contact li .wpcf7-form-control-wrap input:focus, #contact li .wpcf7-form-control-wrap textarea:focus{
	background:#d2ddea;
}
#contact li .wpcf7-form-control-wrap textarea{
	line-height: 28px;
    padding: 10px;
	height:100px;
        width:415px
}
#contact li#message{
	min-height:100px;
}
#contact li#submit input{
float:right;
font-weight:bold;
font-size:16px;
	color:#f3d086;
	text-decoration:none;
	margin:30px 30px 0 0;
	background:#850502;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#850502', endColorstr='#c0504d');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#850502), to(#c0504d));
	background: -moz-linear-gradient(top, #850502, #c0504d);
	border:none;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	-0-border-radius:3px;
	border-radius:3px;
	display:block;
	padding:10px 25px;
	text-align:center;
	text-shadow:0 1px 0 #cd706d;
	text-transform:uppercase;
}
#contact li#submit input:hover{
	background:#cd706d;
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cd706d', endColorstr='#b54e4c');
	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#cd706d), to(#b54e4c));
	background: -moz-linear-gradient(top, #cd706d, #b54e4c);
	-moz-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-webkit-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	-o-box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	box-shadow:0 1px 2px rgba(0,0,0,.5) inset;
	color:#06506c;
	text-shadow:0 1px 0 rgba(255,255,255,.25);
	text-transform:uppercase;
	cursor:pointer;
}
div.wpcf7-validation-errors {
    clear: left;	}
#spec {text-align: justify; font-size:11px; color:#bbb}
#rate {margin-left:660px; width:300px; padding-top:210px}
#inf {padding-top:50px}
input#filee {margin-left:19px; background:#fff url(http://engleash.net/wp-content/themes/accentbox/images/upload.png) no-repeat; width:50px; height:50px}

The image for upload button is just an example. I will appreciate any help.

I hope it helps now

<div id="cframe">
<ul id="contact">
<li><span class="text">Your Name</span><span class="required">(*)</span> <span class="wpcf7-form-control-wrap your-name"><input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-validates-as-required" value="" name="your-name"></span></li>
<li><span class="text">Your Email</span><span class="required">(*)</span><span class="wpcf7-form-control-wrap your-email"><input type="text" size="40" class="wpcf7-form-control wpcf7-text wpcf7-email wpcf7-validates-as-required wpcf7-validates-as-email" value="" name="your-email"></span> </li>
<li><span class="text">Subject</span><span class="wpcf7-form-control-wrap your-subject"><input type="text" size="40" class="wpcf7-form-control wpcf7-text" value="" name="your-subject"></span> </li>
<li id="message"><span class="text">Message</span><span class="wpcf7-form-control-wrap your-message"><textarea rows="10" cols="40" class="wpcf7-form-control  wpcf7-textarea" name="your-message"></textarea></span> </li>
<li>
<div class="textt">File (.doc, .docx, .pdf, .txt, .rtf, .odt, .xls, .tmx), max. 5MB</div>
<div id="load"><span class="wpcf7-form-control-wrap file-14"><input type="file" value="1" size="40" class="wpcf7-form-control  wpcf7-file att" id="filee" name="file-14"></span></div>
</li>
<li id="submit"><input type="submit" class="wpcf7-form-control  wpcf7-submit" value="Order translation"><img class="ajax-loader" src="http://localhost/wordpress/wp-content/plugins/contact-form-7/images/ajax-loader.gif" alt="Trwa wysyłanie..." style="visibility: hidden;"></li>
</ul>

Well, code like this #contact li .wpcf7-form-control-wrap input#filee {margin-left:19px; background:#fff url(http://engleash.net/wp-content/themes/accentbox/images/digg.png) no-repeat; width:50px; height:50px}

doesn’t work. It seems that only margin-left and width paraemtres give desired result.

P.S. Thanks for the links. Will have a look.