<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>Frogx.Three &#187; Estilo para los inputs type=file...</title>
	<atom:link href="http://www.frogx3.com/2007/09/10/estilo-para-los-inputs-typefile/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.frogx3.com</link>
	<description>Blog de diseño con recursos para diseño y desarrollo web - Tutoriales, tips, snippets, iconos, recursos, plantillas</description>
	<lastBuildDate>Thu, 09 Feb 2012 20:00:11 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.1</generator>
<xhtml:meta xmlns:xhtml="http://www.w3.org/1999/xhtml" name="robots" content="noindex" />
		<item>
		<title>Estilo para los inputs type=file</title>
		<link>http://www.frogx3.com/2007/09/10/estilo-para-los-inputs-typefile/</link>
		<comments>http://www.frogx3.com/2007/09/10/estilo-para-los-inputs-typefile/#comments</comments>
		<pubDate>Mon, 10 Sep 2007 23:05:42 +0000</pubDate>
		<dc:creator>Jorge</dc:creator>
				<enclosure url="" length="32000" type="image/" />
				<category><![CDATA[CSS]]></category>
		<category><![CDATA[Diseño Gráfico]]></category>
		<category><![CDATA[Javascript]]></category>
		<category><![CDATA[Tips]]></category>
		<category><![CDATA[Web 2.0]]></category>

		<guid isPermaLink="false">http://www.frogx3.com/2007/09/10/estilo-para-los-inputs-typefile/</guid>
		<description><![CDATA[&#60;input tye=&#8221;file&#8221; /&#62; [w3School] En Anieto2k acaban de publicar un post por mas interesante, se trata de la posibilidad de dotar de estilo a los inputs type=file (esos que sirven...]]></description> 
			<content:encoded><![CDATA[<p align="center"><strong>&lt;input tye=&#8221;file&#8221; /&gt; </strong><a href="http://www.frogx3.com/wp-admin/www.w3schools.com/htmldom/dom_obj_fileupload.asp"  target="_blank"><em>[w3School]</em></a></p>
<p>En <a href="http://www.anieto2k.com/2007/09/10/dando-estilo-a-los-elementos/"  target="_blank">Anieto2k</a>  acaban de publicar un post por mas interesante, se trata de la posibilidad de dotar de estilo a los inputs type=file (esos que sirven normalmente para subir archivos al server) utilizando CSS y Javascript, batante util ya que este elemento era el que le quitaba un poco el estilo a nuestros formularios, pero bueno aqui una alternativa.<br />
<!--adsense#news--><br />
<strong>HTML:</strong></p>
<pre class="javascript"><code></code>&lt;label class="cabinet"&gt;    &lt;input type="file" class="file" /&gt;&lt;/label&gt;</pre>
<p><strong>CSS:</strong></p>
<pre class="css"><code>.SI-FILES-STYLIZED label.cabinet{</code>width: 79px;height: 22px;

background: url(btn-choose-file.gif) 0 0 no-repeat;    display: block;

overflow: hidden;

cursor: pointer;

}

.SI-FILES-STYLIZED label.cabinet input.file

{

position: relative;

height: 100%;

width: auto;

opacity: 0;

-moz-opacity: 0;

filter:progid:DXImageTransform.Microsoft.Alpha(opacity=0);

}</pre>
<p><strong>Javascript:</strong></p>
<pre class="javascript"><code>&lt;script type="text/javascript" src="/path/to/si.files.js"&gt;&lt;/script&gt;</code> SI.Files.stylizeAll();//oSI.Files.stylizeById('input-id');</pre>
<p>Es compatible con IE5.5+, Firefox 1.5+, Safari 2+</p>
<p>Ver <a href="http://www.shauninman.com/assets/examples/styling-file-inputs/"  target="_blank" title="Estilo para inputs type=file">Demo</a>  / <a href="http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom"  target="_blank">Descargar </a></p>
<!-- SimpleReach Slide Plugin Version: 0.6.0 -->
<script type='text/javascript' id='simplereach-slide-tag'>
    __spr_config = {
      pid: '4e4ae1a5c2b219358b000005',
      title: 'Estilo para los inputs type=file',
      ckw: 'CSS,Diseño Gráfico,Javascript,Tips,Web 2.0',
      chan: '',
      no_slide: '',
      slide_logo: true,
      pub: '2007-09-11 05:05:42',
      url: 'http%3A%2F%2Fwww.frogx3.com%2F2007%2F09%2F10%2Festilo-para-los-inputs-typefile%2F',
      header: 'TAMBIEN TE RECOMENDAMOS'
    };
    var content = document.getElementById('simplereach-slide-tag').parentNode, loc;
    if (content.className){ loc = '.' + content.className; }
    if (content.id){ loc = '#' + content.id; }
    __spr_config.loc = loc || content;
    (function(){
    var s = document.createElement('script');
      s.async = true;
      s.type = 'text/javascript';
      s.src = document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/js/slide.js';
      __spr_config.css = 'document.location.protocol + '//d8rk54i4mohrb.cloudfront.net/css/p/4e4ae1a5c2b219358b000005.css';
      var tg = document.getElementsByTagName('head')[0];
      if (!tg) {tg = document.getElementsByTagName('body')[0];}
      if (tg) {tg.appendChild(s);}
    })();
</script>
]]></content:encoded>
			<wfw:commentRss>http://www.frogx3.com/2007/09/10/estilo-para-los-inputs-typefile/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

