如何样式化HTML提交表单？

-1

<form action="upload.php" method="post" enctype="multipart/form-data"> 
<input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"> 
</form>

它使一个“选择文件”按钮，选择要上传的文件，但如何在CSS做款式此按钮，出现更改颜色，大小，位置和字体？

我已经试过input[type=submit] {}但似乎并没有工作

另外，我怎么可以改变从“选择文件”到“上传”按钮的话吗？

来源

2014-12-20 nickelton6

该类型是file，不submit，通过type="file"所示：

input[type=file] { 
    /* styles here */ 
}

样式化按钮，但是，是复杂的。正如this answer中所解释的那样，您必须将实际输入字段移出视图，然后添加具有您自己样式的按钮。

来源

2014-12-20 03:06:45

噢，对不起，这是一个愚蠢的错误:)不过我已经改变了CSS为type =文件，而不是，但它只是编辑按钮周围，而不是实际的按钮空间，例如颜色适用于按钮周围，但不适用于此 – nickelton6

请参阅我的编辑。不幸的是，你想要做的事情非常棘手，需要CSS和JavaScript的组合来获得所需的行为。 –

你错过了file，您是submit创建的风格，你有input type="file"：

input[type=file] { 
    /* styles here */ 
}

而对于第二个，要改变从“选择文件”到“上传”按钮的话，加属性value="Upload"

<input type="file" name="filetoupload" id="filetoupload" value="Upload" onchange="this.form.submit();">

来源

2014-12-20 03:10:56

谢谢，但我已经改变了，它仍然说选择文件。新代码是 – nickelton6

http://www.quirksmode.org/ DOM/inputfile.html –

这很难做到。如果您可以使用jQuery，请尝试将这些代码扔在一起。

$('input[type="file"]').change(function() { 
 

 
    var value = $(this).val(); 
 

 
    var value = value.replace("C:\\fakepath\\", "") 
 

 
    if (value) { 
 
    $(this).siblings('#fileName').html(value); 
 
    } else { 
 

 
    $(this).siblings('#fileName').html('upload'); 
 

 
    } 
 

 
});

input[type=file] { 
 
    display: none; 
 
} 
 
label { 
 
    cursor: pointer; 
 
} 
 
label > span { 
 
    border: 1px solid black; 
 
    padding: 5px; 
 
    border-radius: 5px; 
 
    background: white; 
 
    color: black; 
 
    transition: background 0.5s, color 0.5s; 
 
} 
 
label > span:hover { 
 
    background: black; 
 
    color: white; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form action="upload.php" method="post" enctype="multipart/form-data"> 
 
    <label> 
 
    <input type="file" name="filetoupload" id="filetoupload" onchange="this.form.submit();"><span id="fileName">upload</span> 
 
    </label> 
 
</form>

来源

2014-12-20 03:43:49

如何样式化HTML提交表单？

回答

相关问题