Win a copy of Microservices Testing (Live Project) this week in the Spring forum!
  • Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Tim Cooke
  • Ron McLeod
  • Jeanne Boyarsky
  • Paul Clapham
Sheriffs:
  • Liutauras Vilda
  • Henry Wong
  • Devaka Cooray
Saloon Keepers:
  • Tim Moores
  • Stephan van Hulst
  • Tim Holloway
  • Al Hobbs
  • Carey Brown
Bartenders:
  • Piet Souris
  • Mikalai Zaikin
  • Himai Minh

Font-weight of Browse button

 
Greenhorn
Posts: 13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi ,

I am trying to apply styles to my html browse button.I could change the font size of the "Browse" text on the Browse button but i want to make it BOLD ?
 
Sindhura Lakshmi
Greenhorn
Posts: 13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi ,

Can Any one Help

Thanks
Sindhu
 
Sheriff
Posts: 67650
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
If you are talking about the button created as part of the <input type="file"> element, there are limited options for styling. I do not believe that you will be able to affect the style of the button.

I have read about techniques where the file control is hidden and proxied by stylable elements, but I've never been able to get is working adequately in a cross-browser fashion. (Didn't try too hard though.) You might do a search and see if someone else has been successful.
 
Sindhura Lakshmi
Greenhorn
Posts: 13
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
Hi ,

I was able to work this with the help of css and javascript but i am not able to edit the path which is selected in the browse input field ..

My code is as follows :
html file :

<html>
<head>
<style type="text/css">
#mybrowse { font-weight: bold; }

div.fileinputs {
position: relative;
}

div.fakefile {
position: absolute;
top: 0px;
left: 0px;
z-index: 1;
}

input.file {
position: relative;
text-align: right;
-moz-opacity:0 ;
filter:alpha(opacity: 0);
opacity: 0;
z-index: 2;
}
</style>
</head>
<script type="text/javascript">
var W3CDOM = (document.createElement && document.getElementsByTagName);

function initFileUploads() {
if (!W3CDOM) return;
var fakeFileUpload = document.createElement('div');
fakeFileUpload.className = 'fakefile';
fakeFileUpload.appendChild(document.createElement('input'));
var x = document.getElementsByTagName('input');
alert(x.length);
for (var i=0;i<x.length;i++) {
if (x[i].type != 'file') continue;
if (x[i].parentNode.className != 'fileinputs') continue;
x[i].className = 'file hidden';
var clone = fakeFileUpload.cloneNode(true);
x[i].parentNode.appendChild(clone);
x[i].relatedElement = clone.getElementsByTagName('input')[0];
x[i].onchange = x[i].onmouseout = function () {
this.relatedElement.value = this.value;
}
}
}


function modify(){
alert("Modification Success");
}


></script>

<body>


<div class="fileinputs">
<input type="file" class="file" onchange="initFileUploads()" />
<div class="fakefile" >
<input />
<input type="button" value="Browse"id="mybrowse" /> </div>

</div>


</body>
</html>

.
Please suggest ideas
 
Don't get me started about those stupid light bulbs.
reply
    Bookmark Topic Watch Topic
  • New Topic