Input type file styling

I changed the input file button style with jquery, but i need space between the text input and the button.

How can i do it?

I use this tutorial : http://www.appelsiini.net/projects/filestyle
.

Problem courtesy of: Houx

Solution

you can edit javascript source code, add some margin-left like me (“margin-left:”8px”),

try with this:

/*
 * Style File - jQuery plugin for styling file input elements
 *  
 * Copyright (c) 2007-2008 Mika Tuupola
 *
 * Licensed under the MIT license:
 *   http://www.opensource.org/licenses/mit-license.php
 *
 * Based on work by Shaun Inman
 *   http://www.shauninman.com/archive/2007/09/10/styling_file_inputs_with_css_and_the_dom
 *
 * Revision: $Id: jquery.filestyle.js 303 2008-01-30 13:53:24Z tuupola $
 *
 */

(function($) {

    $.fn.filestyle = function(options) {

        /* TODO: This should not override CSS. */
        var settings = {
            width : 250
        };

        if(options) {
            $.extend(settings, options);
        };

        return this.each(function() {

            var self = this;
            var wrapper = $("
") .css({ "width": settings.imagewidth + "px", "height": settings.imageheight + "px", "background": "url(" + settings.image + ") 0 0 no-repeat", "background-position": "right", "display": "inline", "position": "absolute", "overflow": "hidden" "margin-left:"8px", }); var filename = $('') .addClass($(self).attr("class")) .css({ "display": "inline", "width": settings.width + "px" }); $(self).before(filename); $(self).wrap(wrapper); $(self).css({ "position": "relative", "height": settings.imageheight + "px", "width": settings.width + "px", "display": "inline", "cursor": "pointer", "opacity": "0.0" }); if ($.browser.mozilla) { if (/Win/.test(navigator.platform)) { $(self).css("margin-left", "-142px"); } else { $(self).css("margin-left", "-168px"); }; } else { $(self).css("margin-left", settings.imagewidth - settings.width + "px"); }; $(self).bind("change", function() { filename.val($(self).val()); }); }); }; })(jQuery);

Solution courtesy of: Hadi Mostafapour

责编内容来自:CSS3 Recipes (源链) | 更多关于

阅读提示:酷辣虫无法对本内容的真实性提供任何保证,请自行验证并承担相关的风险与后果!
本站遵循[CC BY-NC-SA 4.0]。如您有版权、意见投诉等问题,请通过eMail联系我们处理。
酷辣虫 » 前端开发 » Input type file styling

喜欢 (0)or分享给?

专业 x 专注 x 聚合 x 分享 CC BY-NC-SA 4.0

使用声明 | 英豪名录