Solved

Input styles

Posted on 2006-10-24
13
506 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
Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 

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
 
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

Announcing the Most Valuable Experts of 2016

MVEs are more concerned with the satisfaction of those they help than with the considerable points they can earn. They are the types of people you feel privileged to call colleagues. Join us in honoring this amazing group of Experts.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
Not seen Link button 5 55
manage footer size 4 72
tiny glitch in my main slider 3 39
Responsive Font Size 6 26
Building a website can seem like a daunting task to the uninitiated but it really only requires knowledge of two basic languages: HTML and CSS.
This article discusses four methods for overlaying images in a container on a web page
In this Micro Tutorial viewers will learn how to create navigation buttons that change on rollover, using CSS (Continuation of the CSS Image Sprite tutorial) Create a parent ID for all the list items       - Specify position: absolute and display: block…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS. In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…

856 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