<!DOCTYPE html>
|
<html>
|
<head>
|
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
|
<title>The source code</title>
|
<link href="../resources/prettify/prettify.css" type="text/css" rel="stylesheet" />
|
<script type="text/javascript" src="../resources/prettify/prettify.js"></script>
|
<style type="text/css">
|
.highlight { display: block; background-color: #ddd; }
|
</style>
|
<script type="text/javascript">
|
function highlight() {
|
document.getElementById(location.hash.replace(/#/, "")).className = "highlight";
|
}
|
</script>
|
</head>
|
<body onload="prettyPrint(); highlight();">
|
<pre class="prettyprint lang-js">.#{$prefix}form-file-btn {
|
overflow: hidden;
|
}
|
|
.#{$prefix}form-file-input {
|
border: 0; // disables the focus border in old IE
|
position: absolute;
|
cursor: pointer;
|
// some browsers (I'm looking at you Firefox) add extra space around the file button
|
// that can't be removed using CSS. Others (webkit) add default margin. Rather than
|
// try to handle each browser's unique case, we just negatively position the input to
|
// ensure that there is no extra space between it and the Button's edge
|
top: -2px;
|
right: -2px;
|
@include opacity(0);
|
/* Yes, there's actually a good reason for this...
|
* If the configured buttonText is set to something longer than the default,
|
* then it will quickly exceed the width of the hidden file input's "Browse..."
|
* button, so part of the custom button's clickable area will be covered by
|
* the hidden file input's text box instead. This results in a text-selection
|
* mouse cursor over that part of the button, at least in Firefox, which is
|
* confusing to a user. Giving the hidden file input a huge font-size makes
|
* the native button part very large so it will cover the whole clickable area.
|
*/
|
font-size: 1000px;
|
}
|
|
@if $include-rtl {
|
.#{$prefix}rtl.#{$prefix}form-file-input {
|
right: auto;
|
left: -2px;
|
}
|
}
|
</pre>
|
</body>
|
</html>
|
