I am currently trying to create a custom style-sheet overlaying the the default Bootstrap 4.3.1 theme and I'm having some difficulties with the checkboxes and radiobuttons.
I can't seem to figure out how to change the checkbox and radiobuttons color whenever they are checked. I wanna go from the default ones to these ones, whenever they are clicked.
I've tried to edit the _input-group.scss file so I can customize code:
.input-group-text {
display: flex;
align-items: center;
padding: $input-padding-y $input-padding-x;
margin-bottom: 0; // Allow use of <label> elements by overriding our default margin-bottom
#include font-size($input-font-size); // Match inputs
font-weight: $font-weight-normal;
line-height: $input-line-height;
color: $input-group-addon-color;
text-align: center;
white-space: nowrap;
background-color: $input-group-addon-bg;
border: $input-border-width solid $input-group-addon-border-color;
#include border-radius($input-border-radius);
// Nuke default margins from checkboxes and radios to vertically center within.
input[type="radio"],
input[type="checkbox"] {
margin-top: 0;
background-color: #e5f0f8;
color: #005db8; // checkmark color;
}
}
For the size I created a copy of Bootstrap's _forms.scss file and overwrote the values:
.form-check-input {
position: absolute;
margin-top: $form-check-input-margin-y;
margin-left: -$form-check-input-gutter;
width: 1.052rem; // changed default width
height: 1.052rem; //changed default height
&:disabled ~ .form-check-label {
color: $text-muted;
}
}
What am I doing wrong ? I'm open to suggestions, thank you in advance.
i also tried to overwright bootstrap check & radio but i think it's not possible. then i use custom scss. this may help you.
scss
/* Customize the label (the container) */
.custom-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Hide the browser's default checkbox */
input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
/* Create a custom checkbox */
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #E1E6EB;
}
/* On mouse-over, add a grey background color */
&:hover input ~ .checkmark {
background-color: #ffffff;
}
/* When the checkbox is checked, add a blue background */
input:checked ~ .checkmark {
background-color: #ffffff;
border: 1px solid #E1E6EB;
display: flex;
justify-content: center;
align-items: center;
}
/* Create the checkmark/indicator (hidden when not checked) */
.checkmark:after {
content: url('data:image/svg+xml;charset=UTF-8, <svg width="14px" height="11px" viewBox="0 0 14 11" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> <g id="Page-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> <g id="latest-from-careems-1.0(messages)" transform="translate(-326.000000, -546.000000)" fill="#0B97B7" fill-rule="nonzero"> <g id="tick-inside-circle" transform="translate(326.000000, 546.000000)"> <polygon id="Shape" points="1.97807018 5.1245614 0.75 6.35263158 4.69736842 10.3 13.4692982 1.52807018 12.2412281 0.3 4.69736842 7.84385965"></polygon> </g> </g> </g> </svg>');
position: absolute;
display: none;
}
/* Show the checkmark when checked */
input:checked ~ .checkmark:after {
display: block;
}
}
//custom radio
.custom-radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 18px;
font-family: cormorantlightitalic;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
/* Hide the browser's default radio button */
input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.checkmark {
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #E1E6EB;
border-radius: 50%;
/* Create the indicator (the dot/circle - hidden when not checked) */
&:after {
content: "";
position: absolute;
display: none;
}
}
/* On mouse-over, add a grey background color */
&:hover input ~ .checkmark {
background-color: #fff;
border: 1px solid #0093B4;
}
/* When the radio button is checked, add a blue background */
input:checked ~ .checkmark {
background-color: #fff;
border: 1px solid #0093B4;
}
/* Show the indicator (dot/circle) when checked */
input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.checkmark:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0093B4;
}
}
.custom-check {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-check input[type=checkbox] {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0
}
.custom-check .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #fff;
border: 1px solid #e1e6eb
}
.custom-check:hover input~.checkmark {
background-color: #fff
}
.custom-check input:checked~.checkmark {
background-color: #fff;
border: 1px solid #e1e6eb;
display: flex;
justify-content: center;
align-items: center
}
.custom-check .checkmark:after {
content: url('data:image/svg+xml;charset=utf-8,<svg width="14" height="11" xmlns="http://www.w3.org/2000/svg"><path d="M1.978 5.125L.75 6.353 4.697 10.3l8.772-8.772L12.241.3 4.697 7.844z" fill="%230B97B7" fill-rule="nonzero"/></svg>');
position: absolute;
display: none
}
.custom-check input:checked~.checkmark:after {
display: block
}
.custom-radio {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 12px;
font-size: 18px;
font-family: cormorantlightitalic;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none
}
.custom-radio input {
position: absolute;
opacity: 0;
cursor: pointer
}
.custom-radio .checkmark {
position: absolute;
top: 5px;
left: 0;
height: 20px;
width: 20px;
background-color: #fff;
border: 1px solid #e1e6eb;
border-radius: 50%
}
.custom-radio .checkmark:after {
content: "";
position: absolute;
display: none
}
.custom-radio:hover input~.checkmark,
.custom-radio input:checked~.checkmark {
background-color: #fff;
border: 1px solid #0093b4
}
.custom-radio input:checked~.checkmark:after {
display: block
}
.custom-radio .checkmark:after {
top: 5px;
left: 5px;
width: 10px;
height: 10px;
border-radius: 50%;
background: #0093b4
}
<label class="custom-check">
<input type="checkbox" checked="checked">
<span class="checkmark"></span>
</label>
<br><br>
<div class="form-check form-check-inline">
<label class="custom-radio">Call
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios1" value="Call" checked>
<span class="checkmark"></span>
</label>
</div>
<div class="form-check form-check-inline">
<label class="custom-radio">Email
<input class="form-check-input" type="radio" name="contact_type" id="exampleRadios2" value="Email">
<span class="checkmark"></span>
</label>
</div>
As far as I know, overwriting browser default checkbox and the radio button is not possible, for achieving what you seek you should apply display: none; to the default radio and checkbox buttons and make custom ones by yourself.
For this purpose, you can check the following guides:
Styling Checkboxes and Radio Buttons
w3schools
EDIT: here is a simple but not very lean and tidy example below:
/* hide the regular checkbox */
.pd-checkbox input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-checkbox input,
.pd-checkbox label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-checkbox label {
position: relative;
}
/* style the unchecked checkbox */
.pd-checkbox input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
/* style the checked checkbox */
.pd-checkbox input:checked+label:before {
content: "\f00c";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #9cb1c4;
}
/* hide the regular radio button */
.pd-radio input {
opacity: 0;
position: absolute;
}
/* position the label */
.pd-radio input,
.pd-radio label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
}
.pd-radio label {
position: relative;
}
/* style the unchecked radio button */
.pd-radio input+label:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
}
.pd-radio input+label:before {
border-radius: 50%;
}
/* style the selected radio button */
.pd-radio input:checked+label:before {
content: "\f111";
font-family: 'FontAwesome';
background: #e9f0fb;
color: #035fb7;
border-color: #035fb7;
}
<!-- Load the Font Awesome Library via CDN -->
<link href="//cdnjs.cloudflare.com/ajax/libs/font-awesome/3.2.1/css/font-awesome.min.css" media="all" rel="stylesheet" type="text/css">
<p class="form-field checkbox1 pd-checkbox required no-label">
<input id="checkbox1" name="checkbox1" onchange="" type="checkbox" value="">
<label class="inline" for="checkbox1">Checkbox</label>
</p>
<p class="form-field radio1 pd-radio required no-label ">
<span class="value">
<span class="" style="">
<input type="radio" name="radioButton" id="radioButton" value="" onchange="">
<label class="inline" for="radioButton">Radiobutton</label>
</span>
</span>
</p>
NOTE: I just used CSS above for more illustration and code snippets.
And here we got the SCSS codes:
$color_1: #035fb7;
$font_family_1: 'FontAwesome';
$border_color_1: #9cb1c4;
$border_color_2: #035fb7;
.pd-checkbox {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f00c";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_1;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
margin-right: 10px;
text-align: center;
font-size: 17px;
line-height: 15px;
}
}
}
.pd-radio {
input {
opacity: 0;
position: absolute;
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
&:checked&+label {
&:before {
content: "\f111";
font-family: $font_family_1;
background: #e9f0fb;
color: $color_1;
border-color: $border_color_2;
}
}
}
label {
display: inline-block;
vertical-align: middle;
margin: 5px;
cursor: pointer;
outline: none;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
position: relative;
}
input&+label {
&:before {
content: '';
background: #fff;
border: 2px solid #ddd;
display: inline-block;
vertical-align: middle;
width: 15px;
height: 15px;
padding: 5px;
line-height: 15px;
margin-right: 10px;
text-align: center;
border-radius: 50%;
}
}
}
Related
I have an app made in cord. I only used it for android now I decided to test it for IOS and I noticed these CSS errors.
How do I fix these errors that appear only in the IOS app?
if it is useful, I will post my css files below.
Do you have to add a hack to css to be interpreted by IOS?
IMPUTS
.form-group {
background-color: white;
padding: 5px;
margin-bottom: 15px;
border-bottom: 1px solid #a7a7a7;
border-radius: 1px;
height: 47px;
}
.form-group label {
display: inline-block;
margin-bottom: 7px;
float: left;
font-size: 14px;
}
.form-group input[type=text],input[type=password],input[type=number],select,textarea {
width: 100%;
border: 0px;
font-weight: 600;
font-size: 17px;
background-color: white;
text-transform: uppercase;
outline: none;
}
.form-group input[type=date],input[type=datetime-local] {
width: 100%;
border: 0px;
font-weight: 600;
font-size: 17px;
background-color: white;
text-transform: uppercase;
outline: none;
}
*:focus {
outline: none;
}
checkbox.css
input[type=checkbox] {
position: relative;
cursor: pointer;
margin: 0 13px 10px 0;
}
input[type=checkbox]:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#FFF;
border: solid 1px #CCC;
}
input[type=checkbox]:checked:before {
content: "";
display: block;
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
background-color:#1E80EF;
}
input[type=checkbox]:checked:after {
content: "";
display: block;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 2px 2px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
position: absolute;
top: 3px;
left: 8px;
}
radio.css
.form-group-radio {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 12px;
cursor: pointer;
font-size: 22px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.form-group-radio span {
float: left;
}
/* Hide the browser's default radio button */
.form-group-radio input {
position: absolute;
opacity: 0;
cursor: pointer;
}
/* Create a custom radio button */
.form-group-radio .checkmark {
position: absolute;
top: 0;
left: 0;
height: 25px;
width: 25px;
background-color: #eee;
border-radius: 50%;
}
/* On mouse-over, add a grey background color */
.form-group-radio:hover input ~ .checkmark {
background-color: #ccc;
}
/* When the radio button is checked, add a blue background */
.form-group-radio input:checked ~ .checkmark {
background-color: #2196F3;
}
/* Create the indicator (the dot/circle - hidden when not checked) */
.form-group-radio .checkmark:after {
content: "";
position: absolute;
display: none;
}
/* Show the indicator (dot/circle) when checked */
.form-group-radio input:checked ~ .checkmark:after {
display: block;
}
/* Style the indicator (dot/circle) */
.form-group-radio .checkmark:after {
top: 9px;
left: 9px;
width: 8px;
height: 8px;
border-radius: 50%;
background: white;
}
I won't go through your code because it's too much of a guess. My advice to you is always develop using chrome, then test again in Safari. You will find that Safari does not support/respect everything that Chrome does, css wise.
For instance, iOS webview has a hard time with flex box or even sticky. Lots of patching for Safari needed. So your code might be legit but iOS webview won't support it fully.
You can also detect with cordova what platform you are running (device.platform) then you can add a .ios class to your body and patch via the .ios class
This is a followup for a solved question :
transition background of pseudo element
The idea is to add a transition to the background color which appears when we do a hover, this following code works on IE11, but without the transition:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
background: #D9DEEA;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
However, this code doesn't work on IE11, since it doesn't support var:
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ var(--s,0px 0px);
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
background: none;
border: none;
}
input[type=checkbox]:hover + label:before {
--s:100% 100%;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
I have updated the code from the solution of my previous question, so it can work with IE11, but I couldn't figure out how to do a workaround for var in IE11.
Edit
Thanks to #Temani Afif answer, I managed to do the transition without the var and using checkbox with input (since pseudo element are not meant to be used on replaced elements such as form elements (inputs)):
input[type=checkbox] {
appearance: none;
}
input[type=checkbox] + label {
margin: 0;
padding: 0;
user-select: none;
}
input[type=checkbox] + label::before {
content: url("https://svgshare.com/i/Qo7.svg");
cursor: pointer;
color: transparent;
background: none;
border: none;
border-radius: 50%;
height: 40px;
width: 40px;
display: flex;
justify-content: center;
align-items: center;
background: radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type=checkbox]:checked + label:before {
content: url("https://svgshare.com/i/Qmp.svg");
border: none;
}
input[type=checkbox]:hover + label:before {
background-size: 40px 40px;
}
<input type="checkbox" id="checkbox1"/>
<label for="checkbox1"></label>
But in IE11 the background just appears instantly without the transition.
No CSS variables solution
.container {
position: relative;
height: 100px;
width: 300px;
padding: 24px;
box-sizing: border-box;
color: black;
border: 2px solid black;
}
input[type="checkbox"] {
height: 40px;
width: 40px;
position: absolute;
top: 12px;
right: 12px;
appearance: none;
outline: none;
cursor: pointer;
border: none;
background:
url("https://svgshare.com/i/Qo7.svg") calc(50% + 1px) 50% /60% 60%,
radial-gradient(farthest-side,#D9DEEA 99%,transparent) center/ 0px 0px;
background-repeat:no-repeat;
transition:0.5s;
}
input[type="checkbox"]:hover {
background-size:
60% 60%,
100% 100%;
}
input[type="checkbox"]:checked {
background-image:
url("https://svgshare.com/i/Qmp.svg"),
radial-gradient(farthest-side,#D9DEEA 99%,transparent);
}
<div class="container">
<input type="checkbox" >
</div>
I´m trying to make a custom checkbox buttons that when clicked on will change its color as an indicator that they are active. I got up the point where its almost done but the checkbox is appearing left of the box instead of being the button itself. I can't find out how to do this.
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: relative;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}
<input type="checkbox" name="test" /><label>Text goes here</label></input>
You can do it as follows it will solve your problem:
Add a for the attribute in the label and set an id attribute in the input type this will bind both the elements and you can get the desired result.
<input id="my_checkbox" type="checkbox" name="test" />
<label for="my_checkbox">
Text goes here
</label>
</input>
Here I have put an id="my_checkbox" to the the checkbox input and added in the for="my_checkbox" attr.
input[type=checkbox] {
width: auto;
height: 20px;
cursor: pointer;
position: absolute;
opacity: 0;
z-index: 9999;
}
input[type=checkbox] + label {
font-family: "Aharoni";
display: inline-block;
background: #dcdcdc;
color: black;
font-size: 12px;
font-weight: 400;
text-align: center;
border: solid 1px #a8a8a8;
border-bottom-color: black;
border-radius: 0px;
width: auto;
height: 20px;
padding-left:5px;
padding-right:5px;
cursor: pointer;
position: relative;
}
input[type=checkbox]:checked + label,
input[type=checkbox]:active + label {
background:gray;
color:white;
}
<input type="checkbox" name="test"><label>Text goes here</label></input>
This question already has answers here:
How to style a checkbox using CSS
(43 answers)
Closed 6 years ago.
I want to color the border of checkbox. I have written the below css -
input[type=checkbox] {
height: 15px;
width: 15px;
border: 1px solid #007dc6;
-webkit-appearance: none;
}
This works for chrome only. I don't want to write browser specific code in css. The css should apply to all latest browsers.
Manipulating checkbox appearance is possible by hiding the default checkbox and styling our own checkbox using the :before element and :checked , not(:checked) selectors
An Example:
body {
font-family: 'segoe ui';
background-color: white;
padding: 10px;
}
.space {
height: 10px;
}
.checkbox * {
box-sizing: border-box;
position: relative;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox {
display: inline-block;
}
.checkbox > input {
display: none;
}
.checkbox > label {
vertical-align: top;
font-size: 18px;
padding-left: 30px;
}
.checkbox > [type="checkbox"] + label:before {
color: #777;
content: '';
position: absolute;
left: 0px;
display: inline-block;
min-height: 20px;
height: 20px;
width: 20px;
border: 2px solid #777;
font-size: 15px;
vertical-align: top;
text-align: center;
transition: all 0.2s ease-in;
content: '';
}
.checkbox.radio-square > [type="checkbox"] + label:before {
border-radius: 0px;
}
.checkbox.radio-rounded > [type="checkbox"] + label:before {
border-radius: 25%;
}
.checkbox.radio-blue > [type="checkbox"] + label:before {
border: 2px solid #ccc;
}
.checkbox > [type="checkbox"] + label:hover:before {
border-color: lightgreen;
}
.checkbox > [type="checkbox"]:checked + label:before {
width: 8px;
height: 16px;
border-top: transparent;
border-left: transparent;
border-color: green;
border-width: 4px;
transform: rotate(45deg);
top: -4px;
left: 4px;
}
<div class="checkbox">
<input id="chkTest" type="checkbox" />
<label for="chkTest">Task one</label>
<div class="space">
</div>
<input id="chkTest1" type="checkbox" />
<label for="chkTest1">Task two</label>
</div>
Fiddle: https://jsfiddle.net/jo_Geek/jc81o4x0/
I am using this file uploader http://blueimp.github.io/jQuery-File-Upload/index.html
But due to some reason Add Files button also show the file upload. I want to hide them like a link. Current look
https://www.dropbox.com/s/41uc6v1b00287lc/screen.PNG
I copied the same css which they use
<span class="btn btn-success fileinput-button">
<i class="glyphicon glyphicon-plus"></i>
<span>Add files...</span>
<input type="file" name="files[]" multiple>
</span>
.fileinput-button {
position: relative;
overflow: hidden;
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: normal;
line-height: 1.428571429;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border: 1px solid transparent;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
input[type="file"] {
display: block;
}
Try with : visibility: hidden ;)
you are missing some css. check out this fiddle its just missing the icon but works how you want it
.btn-success {
color: #fff;
background-color: #5cb85c;
border-color: #4cae4c;
}
.btn {
display: inline-block;
margin-bottom: 0;
font-weight: 400;
text-align: center;
vertical-align: middle;
cursor: pointer;
background-image: none;
border: 1px solid transparent;
white-space: nowrap;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
border-radius: 4px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.fileinput-button input {
position: absolute;
top: 0;
right: 0;
margin: 0;
opacity: 0;
-ms-filter: 'alpha(opacity=0)';
font-size: 200px;
direction: ltr;
cursor: pointer;
}
input[type=file] {
display: block;
}