티스토리 뷰

정보 보관 ver1.0

업로드 버튼(이미지 처리)

James Wetzel 2012. 10. 18. 12:59


<!-- 첨부파일 버튼 이미지 처리//-->

<style type="text/css">

        .file-wrapper {

            cursor: pointer;

            display: inline-block;

            overflow: hidden;

            position: relative;

        }

    .file-wrapper input {

        cursor: pointer;

        font-size: 100px;

        height: 100%;

        filter: alpha(opacity=1);

        -moz-opacity: 0.01;

        opacity: 0.01;

        position: absolute;

        right: 0;

        top: 0;

    }

    .file-wrapper .button {              

        background-image:url('<?=IMG_PATH?>/mt_50.png');

        -moz-border-radius: 5px;

        -webkit-border-radius: 5px;

        border-radius: 5px;

        color: #fff;

        cursor: pointer;

        display: inline-block;

        font-size: 11px;

        font-weight: bold;

        text-transform: uppercase;

        width:28px;

        height:21px;

    }            

</style>


<span class="file-wrapper"><input type="file" name="photo" /><span class="button" style="margin-top:5px; margin-left:15px;"></span></span>










<style type="text/css">

    /* 첨부파일 이미지 처리를 위한 스타일 */

    .file-wrapper 

    {

        cursor: pointer;

        display: inline-block;

        overflow: hidden;

        position: relative;

    }

    .file-wrapper input 

    {

        cursor: pointer;

        filter: alpha(opacity=1);

        -moz-opacity: 0.01;

        opacity: 0.01;

        position: absolute;        

    }

</style>

<span class="file-wrapper">

                    <input type="file" name="sns_file" id="sns_file" style="position:absolute;margin-left:-170px;height:25px;" onchange="sns_file_upload_add()">

                    <img src="<?=IMG_PATH?>/mt_50.png" title="사진첨부" style="margin-top:5px; margin-left:15px;">

                    </span>






728x90
반응형