Solved

Input styles

Posted on 2006-10-24
13
488 Views
Last Modified: 2008-02-01
I know how to change styles to a <input>, but I`m having a hard time applying style to a input that got type="file".

Please help.
0
Comment
Question by:brightwood
  • 7
  • 5
13 Comments
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796773
<input type="file"></input>

Works for me.
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796792
Try this:

<input type="file" style="color:red"></input>
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796812
Or:
<input type="file" style="color:red;font-weight:bold;font-size:12pt"></input>
0
 

Author Comment

by:brightwood
ID: 17796907
It works it seems.

But how I can do i from a css file ?

normal input { } ain't working.

Also how i can change the style to the "choose..." button ?
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17796933
<style>
.hello {
      color:red;
      font-weight:bold;
      font-size:12pt
}
</style>
<input class="hello" type="file"></input>



0
 

Author Comment

by:brightwood
ID: 17797015
Strange, I tryed exactly the same few days ago but not worked. Works now.

But how i can change the style to the "choose..." button ?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 7

Expert Comment

by:RealSnaD
ID: 17797134
Works in IE.

<html>
<head>
  <title>File Upload Example</title>
  <script language="JavaScript" type="text/javascript">
  function HandleFileButtonClick()
  {
    document.frmUpload.myFile.click();
    document.frmUpload.txtFakeText.value = document.frmUpload.myFile.value;
  }
  </script>
</head>
<body>
  <form name="frmUpload">
    <!-- Real Input field, but hidden-->
    <input type="file" id="myFile" style="display:none;">

    <!-- Fake field to fool the user -->
    <input type="text" id="txtFakeText" readonly="true">

    <!-- Button to invoke the click of the File Input -->
    <input type="button" onclick="HandleFileButtonClick();"
         value="Choose...">
  </form>
</body>
</html>
0
 

Author Comment

by:brightwood
ID: 17797413
Mm how about opera / firefox ?
0
 
LVL 7

Expert Comment

by:RealSnaD
ID: 17797560
Doesn't work in Firefox. Click() method isn't recognizable by it. Same in Opera, I believe. I haven't been able to find how to fix that. dispatchEvent() is one of the options. But I still can't figure out how to use it properly.  Why do you want to change Browse to Choose in the first place?
0
 

Author Comment

by:brightwood
ID: 17797665
Sorry for missunderstanding. By default the button is named "Browse" in firefox, but in opera/IE 7 its named "Choose".

I don't want to change the text displayed on button, I want to change its style (size, text color, background color etc).
0
 
LVL 30

Expert Comment

by:VirusMinus
ID: 17799860
0
 
LVL 7

Accepted Solution

by:
RealSnaD earned 500 total points
ID: 17806145
This one works in IE and FF, just change path to the picture to whatever it happens to be on your PC:

<style type="text/css">
<!--
form.example input {
      background: url('pix/input_boxes.gif') no-repeat 0 -58px;
      border: none;
      width: 241px;
      height: 20px;
      padding-left: 3px;
      padding-top: 3px;
}

form.example input:focus {
      background-color: transparent;
}

form.example div.fileinputs {
      position: relative;
      height: 30px;
      width: 300px;
}

form.example input.file {
      width: 300px;
      margin: 0;
}

form.example input.file.hidden {
      position: relative;
      text-align: right;
      -moz-opacity:0 ;
      filter:alpha(opacity: 0);
      opacity: 0;
      z-index: 2;
}

form.example div.fakefile {
      position: absolute;
      top: 0px;
      left: 0px;
      width: 350px;
      padding: 0;
      margin: 0;
      z-index: 1;
      line-height: 90%;
}

form.example div.fakefile input {
      margin-bottom: 5px;
      margin-left: 0;
}
-->
</style>
<form action="#" class="example">
<div class="fileinputs">
      <input type="file" class="file hidden" noscript="true" />

      <div class="fakefile">
            <input />
            <img src="pix/button_select.gif" alt="Browse" />
      </div>
</div>
</form>

Taken from here: http://www.quirksmode.org/dom/inputfile.html
If that example doesn't work for you, read through that article. You'll find everything you asked for.
0
 

Author Comment

by:brightwood
ID: 17815789
Thank you :)
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
Salesforce Apex not same result as my HTML page. Salesforce breaks it. 3 35
Login area of a page 4 32
Adjust the position 3 49
CSS z-index issue 3 22
Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this Micro Tutorial users will learn how to embed custom fonts into websites using @font-face in CSS Select a font: Ensure the EULA allows you to use @font-face: Download the font: Get the browser-compatible files you need: Edit your CSS       - Name …
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…

895 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now