Develop Reference

Apply Css style into webkit-slider-thumb

I would like it to be like this
HTML:
&ltdiv id="container">
&ltdiv id="volume">
&lti class="fa fa-volume-up" aria-hidden="true" id="vol-h"></i>
&lti class="fa fa-volume-off" aria-hidden="true" id="vol-m"></i>
&ltdiv id="vol">&ltdiv id="go">&lt/div>&lt/div>
&lt/div>
&lt/div>
CSS:
#container {
top: 810px;
flex-flow: row wrap;
align-items: center;
padding: 1px 3px;
display: flex;
position: absolute;
border: none;
width: 100%;
height: auto;
}
#container::before{
z-index: -1;
content: ' ';
width: 100%;
height: 100%;
position: fixed;
bottom: -850px;
background: url(../images/NY.png);
background-size:cover;
-webkit-filter: blur(8px);
filter: blur(25px);
}
#container #volume {
width: 90px;
position: relative;
top: 50px;
left: 1600px;
cursor: pointer;
}
#container #volume .fa-volume-up {
font-size: 1em;
color: #019875;
-webkit-filter: drop-shadow(0px 2px 2px #000);
filter: drop-shadow(0px 2px 2px #000);
position: relative;
}
#container #volume .fa-volume-off {
font-size: 1em;
color: #019875;
-webkit-filter: drop-shadow(0px 2px 2px #000);
filter: drop-shadow(0px 2px 2px #000);
position: relative;
}
#container #volume .fa-volume-up:hover {
color: #4C4C4C;
}
#container #volume #vol {
opacity: 0;
-webkit-animation: fadeOutUp ease-in 1;
-moz-animation: fadeOutUp ease-in 1;
animation: fadeOutUp ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
width: 23px;
height: 130px;
background: #141414;
position: absolute;
top: -160px;
left: -2px;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
-ms-border-radius: 2px;
border-radius: 2px;
padding: 10px 10px;
-webkit-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 1px 1px rgba(0, 0, 0, 0.5);
}
#container #volume #vol::before {
content: "";
width: 10px;
height: 10px;
position: absolute;
bottom: -5px;
left: 6px;
background-color: #141414;
-ms-transform: rotate(45deg);
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
#container #volume #vol.active {
-webkit-animation: fadeInDown ease-in 1;
-moz-animation: fadeInDown ease-in 1;
animation: fadeInDown ease-in 1;
-webkit-animation-fill-mode: forwards;
-moz-animation-fill-mode: forwards;
animation-fill-mode: forwards;
-webkit-animation-duration: 0.4s;
-moz-animation-duration: 0.4s;
animation-duration: 0.4s;
}
#container #volume #vol #go {
width: 3px;
height: 100%;
background: #019875;
/* Old browsers */
background: -moz-linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* FF3.6-15 */
background: -webkit-linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* Chrome10-25,Safari5.1-6 */
background: linear-gradient(45deg, #019875 0%, #003023 50%, #019875 100%);
/* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
position: relative;
}
#container #volume #vol #go::before {
content: "";
width: 100%;
height: 22px;
background-color: #4C4C4C;
position: absolute;
top: 0;
left: 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-ms-border-radius: 5px;
border-radius: 5px;
}
#container #volume #vol #go::after {
content: "";
width: 9px;
height: 9px;
background-color: #019875;
position: absolute;
top: 75px;
left: -3px;
-webkit-border-radius: 50px;
-moz-border-radius: 50px;
-ms-border-radius: 50px;
border-radius: 50px;
-webkit-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
-moz-box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 2px 2px rgba(0, 0, 0, 0.5);
}
JavaScipt:
$( "#volume" ).click(function() {
$( "#vol" ).toggleClass( "active" );
});
Here is a link to the included icon Bootstrap.
I tried applying the styling to the webkit but didn't work. Any suggestions on how to apply that style to it ?

How to position awesome font on img and mimic hover properties

I would like to put social media icons under the image beside the title of the photo. I.E facebook, twitter, Soundcloud and Instagram. I would like the social media icons to rotate with the image when the image is hovered over.
HTML
<div class="polaroid-images">
<a href="" title="Alex" ><img height="200" src="Alexandra.jpg" alt="Island" title="Alex" class=fishes /></a>
<i class="fa fa-facebook fa-3x"></i>
</div>
CSS
.polaroid-images a
{
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0,0,0,.3);
box-shadow: 0 4px 6px rgba(0,0,0,.3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index:0;
position:relative;
}
.polaroid-images a, :after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top:15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a, i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover{
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index:10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0,0,0,.7);
box-shadow: 0 10px 20px rgba(0,0,0,.7);
}
.polaroid-images i {
z-index: 11;
padding 30px 25px 15px;
margin-right: 10px 22px 30px ;
position: absolute;
top: 25%;
left: 25%;
transform: translate(1%, 1%);
overflow: hidden;
}

Just add the same transition on hover to the i. Like this:
.polaroid-images:hover i {
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
}

Put it in the a and style it similarly to how you styled the :after that holds the image a title
.polaroid-images a {
background: white;
display: inline;
float: left;
margin: 0 15px 70px;
padding: 10px 10px 25px;
text-align: center;
text-decoration: none;
-webkit-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-moz-box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
box-shadow: 0 4px 6px rgba(0, 0, 0, .3);
-webkit-transition: all .15s linear;
-moz-transition: all .15s linear;
transition: all .15s linear;
z-index: 0;
position: relative;
}
.polaroid-images a,
:after {
color: #333;
font-size: 20px;
content: attr(title);
position: relative;
top: 15px;
}
.polaroid-images img {
display: block;
width: inherit;
}
.polaroid-images a,
i:nth-child(3n) {
-webkit-transform: rotate(-24deg);
-moz-transform: rotate(-24deg);
transform: rotate(-24deg);
}
.polaroid-images a:hover {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
transform: rotate(0deg);
-webkit-transform: scale(1.2);
-moz-transform: scale(1.2);
transform: scale(1.2);
z-index: 10;
-webkit-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
-moz-box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
box-shadow: 0 10px 20px rgba(0, 0, 0, .7);
}
.polaroid-images i {
position: relative;
font-size: 1em;
top: 15px;
margin-right: .5em;
color: #3b5998;
}
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/>
<div class="polaroid-images">
<img height="200" src="http://kenwheeler.github.io/slick/img/fonz1.png" alt="Island" title="Alex" class=fishes /><i class="fa fa-facebook fa-3x"></i>
</div>

Creating JS event from pure css implementation of radio button slider

I have the following pure html and css implementation of a radio slider. What is a good way of creating a javascript event based on the toggle function? I can see a few approaches to poll the component and get it's position, however, I am not sure how to get the change to trigger a callback etc. Thanks.
html,
body,
div,
span,
label {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
line-height: 1;
}
body {
color: #404040;
font-family: 'Lucida Grande', Verdana, sans-serif;
font-size: 13px;
font-weight: normal;
line-height: 20px;
background: #3b3f46;
}
.container {
margin: 0 auto;
padding: 90px 0;
width: 400px;
background-color: false;
background-image: -webkit-gradient(radial, center center, 0, center center, 460, color-stop(0%, rgba(255, 255, 255, 0.1)), color-stop(100%, transparent));
background-image: -webkit-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -moz-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -ms-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: -o-radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
background-image: radial-gradient(center, cover, rgba(255, 255, 255, 0.1), transparent);
}
.switch {
position: relative;
height: 26px;
width: 120px;
margin: 20px auto;
background: rgba(0, 0, 0, 0.25);
border-radius: 3px;
-webkit-box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px rgba(255, 255, 255, 0.1);
}
.switch-label {
position: relative;
z-index: 2;
float: left;
width: 58px;
line-height: 26px;
font-size: 11px;
color: rgba(255, 255, 255, 0.35);
text-align: center;
text-shadow: 0 1px 1px rgba(0, 0, 0, 0.45);
cursor: pointer;
}
.switch-label:active {
font-weight: bold;
}
.switch-label-off {
padding-left: 2px;
}
.switch-label-on {
padding-right: 2px;
}
.switch-input {
display: none;
}
.switch-input:checked + .switch-label {
font-weight: bold;
color: rgba(0, 0, 0, 0.65);
text-shadow: 0 1px rgba(255, 255, 255, 0.25);
-webkit-transition: 0.15s ease-out;
-moz-transition: 0.15s ease-out;
-ms-transition: 0.15s ease-out;
-o-transition: 0.15s ease-out;
transition: 0.15s ease-out;
-webkit-transition-property: color, text-shadow;
-moz-transition-property: color, text-shadow;
-ms-transition-property: color, text-shadow;
-o-transition-property: color, text-shadow;
transition-property: color, text-shadow;
}
.switch-input:checked + .switch-label-on ~ .switch-selection {
left: 60px;
/* Note: left: 50%; doesn't transition in WebKit */
}
.switch-selection {
position: absolute;
z-index: 1;
top: 2px;
left: 2px;
display: block;
width: 58px;
height: 22px;
border-radius: 3px;
background-color: #65bd63;
background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #9dd993), color-stop(100%, #65bd63));
background-image: -webkit-linear-gradient(top, #9dd993, #65bd63);
background-image: -moz-linear-gradient(top, #9dd993, #65bd63);
background-image: -ms-linear-gradient(top, #9dd993, #65bd63);
background-image: -o-linear-gradient(top, #9dd993, #65bd63);
background-image: linear-gradient(top, #9dd993, #65bd63);
-webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
box-shadow: inset 0 1px rgba(255, 255, 255, 0.5), 0 0 2px rgba(0, 0, 0, 0.2);
-webkit-transition: left 0.15s ease-out;
-moz-transition: left 0.15s ease-out;
-ms-transition: left 0.15s ease-out;
-o-transition: left 0.15s ease-out;
transition: left 0.15s ease-out;
}
<div class="container">
<div class="switch">
<input type="radio" class="switch-input" name="view" value="week" id="week" checked>
<label for="week" class="switch-label switch-label-off">ON</label>
<input type="radio" class="switch-input" name="view" value="month" id="month">
<label for="month" class="switch-label switch-label-on">OFF</label>
<span class="switch-selection"></span>
</div>
</div>

You can simply use
if (document.getElementById('week').checked) {
//task to perform when "ON"
}
else
{
//task to perform when "OFF"
}

Alertify JS confirm not working with button link

I had a problem when using alertify JS confirm.
when I click the button, alertify confirm does not appear, but immediately redirects to the link. The following script link button and alertify confirm script.
function CheckDelete(){
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});}
<button type="button" class="btn btn-danger" onClick="return CheckDelete();"><i class="fa fa-remove"></i> Delete</button>
check in : https://jsfiddle.net/r2fs0p45/
Supposedly when I clicked the button, confirm dialog should appears and then go to the link. but according to my code above, when I click the button, It directly redirect to the link, so confirm dialog does not appear.
Does anyone know how to overcome it?

CheckDelete() needs to return false to prevent the default action
function CheckDelete(){
alertify.confirm("This is a confirm dialog.",
function(){
alertify.success('Ok');
},
function(){
alertify.error('Cancel');
});
return false;
}

Do not have button in a tag in your markup.
To navigate user, on OK button callback, use window.location.href to redirect user.
Try this:
function CheckDelete() {
alertify.confirm("This is a confirm dialog.",
function(input) {
if (input) {
alertify.success('Ok');
window.location.href = 'http://google.com';
} else {
alertify.error('Cancel');
}
});
}
.alertify,
.alertify-show,
.alertify-log {
-webkit-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-moz-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-ms-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
-o-transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
transition: all 500ms cubic-bezier(0.175, 0.885, 0.320, 1.275);
/* easeOutBack */
}
.alertify-hide {
-webkit-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 250ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
/* easeInBack */
}
.alertify-log-hide {
-webkit-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-moz-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-ms-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
-o-transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
transition: all 500ms cubic-bezier(0.600, -0.280, 0.735, 0.045);
/* easeInBack */
}
.alertify-cover {
position: fixed;
z-index: 99999;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-color: #f5f5f5;
opacity: 0.5;
}
.alertify-cover-hidden {
display: none;
}
.alertify {
position: fixed;
z-index: 99999;
top: 150px;
left: 50%;
width: 400px;
margin-left: -215px;
opacity: 1;
}
.alertify-hidden {
-webkit-transform: translate(0, -150px);
-moz-transform: translate(0, -150px);
-ms-transform: translate(0, -150px);
-o-transform: translate(0, -150px);
transform: translate(0, -150px);
opacity: 0;
display: none;
}
/* overwrite display: none; for everything except IE6-8 */
:root *> .alertify-hidden {
display: block;
}
.alertify-logs {
position: fixed;
z-index: 5000;
bottom: 10px;
right: 10px;
width: 300px;
}
.alertify-logs-hidden {
display: none;
}
.alertify-log {
display: block;
margin-top: 10px;
position: relative;
right: -300px;
opacity: 0;
}
.alertify-log-show {
right: 0;
opacity: 1;
}
.alertify-log-hide {
-webkit-transform: translate(300px, 0);
-moz-transform: translate(300px, 0);
-ms-transform: translate(300px, 0);
-o-transform: translate(300px, 0);
transform: translate(300px, 0);
opacity: 0;
}
.alertify-dialog {
padding: 25px;
}
.alertify-resetFocus {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
}
.alertify-inner {
text-align: center;
}
.alertify-text {
margin-bottom: 15px;
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
font-size: 100%;
}
.alertify-buttons {} .alertify-button,
.alertify-button:hover,
.alertify-button:active,
.alertify-button:visited {
background: none;
text-decoration: none;
border: none;
/* line-height and font-size for input button */
line-height: 1.5;
font-size: 100%;
display: inline-block;
cursor: pointer;
margin-left: 5px;
}
.alertify-isHidden {
display: none;
}
#media only screen and (max-width: 680px) {
.alertify,
.alertify-logs {
width: 90%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
.alertify {
left: 5%;
margin: 0;
}
}
/**
* Twitter Bootstrap Look and Feel
* Based on http://twitter.github.com/bootstrap/
*/
.alertify,
.alertify-log {
font-family: sans-serif;
}
.alertify {
background: #FFF;
border: 1px solid #8E8E8E;
/* browsers that don't support rgba */
border: 1px solid rgba(0, 0, 0, .3);
border-radius: 6px;
box-shadow: 0 3px 7px rgba(0, 0, 0, .3);
-webkit-background-clip: padding;
/* Safari 4? Chrome 6? */
-moz-background-clip: padding;
/* Firefox 3.6 */
background-clip: padding-box;
/* Firefox 4, Safari 5, Opera 10, IE 9 */
}
.alertify-dialog {
padding: 0;
}
.alertify-inner {
text-align: left;
}
.alertify-message {
padding: 15px;
margin: 0;
color: Black;
}
.alertify-text-wrapper {
padding: 0 15px;
}
.alertify-text {
color: #555;
border-radius: 4px;
padding: 8px;
background-color: #FFF;
border: 1px solid #CCC;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}
.alertify-text:focus {
border-color: rgba(82, 168, 236, .8);
outline: 0;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(82, 168, 236, .6);
}
.alertify-buttons {
padding: 8px 15px 8px;
background: #F5F5F5;
border-top: 1px solid #DDD;
border-radius: 0 0 6px 6px;
box-shadow: inset 0 1px 0 #FFF;
text-align: right;
}
.alertify-button,
.alertify-button:hover,
.alertify-button:focus,
.alertify-button:active {
margin-left: 10px;
border-radius: 4px;
font-weight: normal;
padding: 4px 12px;
text-decoration: none;
box-shadow: inset 0 1px 0 rgba(255, 255, 255, .2), 0 1px 2px rgba(0, 0, 0, .05);
background-image: -webkit-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -moz-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -ms-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: -o-linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
background-image: linear-gradient(top, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0));
}
.alertify-button:focus {
outline: none;
box-shadow: 0 0 5px #2B72D5;
}
.alertify-button:active {
position: relative;
box-shadow: inset 0 2px 4px rgba(0, 0, 0, .15), 0 1px 2px rgba(0, 0, 0, .05);
}
.alertify-button-cancel,
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active {
text-shadow: 0 -1px 0 rgba(255, 255, 255, .75);
background-color: #E6E6E6;
border: 1px solid #BBB;
color: #333;
background-image: -webkit-linear-gradient(top, #FFF, #E6E6E6);
background-image: -moz-linear-gradient(top, #FFF, #E6E6E6);
background-image: -ms-linear-gradient(top, #FFF, #E6E6E6);
background-image: -o-linear-gradient(top, #FFF, #E6E6E6);
background-image: linear-gradient(top, #FFF, #E6E6E6);
}
.alertify-button-cancel:hover,
.alertify-button-cancel:focus,
.alertify-button-cancel:active {
background: #E6E6E6;
}
.alertify-button-ok,
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active {
text-shadow: 0 -1px 0 rgba(0, 0, 0, .25);
background-color: #04C;
border: 1px solid #04C;
border-color: #04C #04C #002A80;
border-color: rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.1) rgba(0, 0, 0, 0.25);
color: #FFF;
}
.alertify-button-ok:hover,
.alertify-button-ok:focus,
.alertify-button-ok:active {
background: #04C;
}
.alertify-log {
background: #D9EDF7;
padding: 8px 14px;
border-radius: 4px;
color: #3A8ABF;
text-shadow: 0 1px 0 rgba(255, 255, 255, .5);
border: 1px solid #BCE8F1;
}
.alertify-log-error {
color: #B94A48;
background: #F2DEDE;
border: 1px solid #EED3D7;
}
.alertify-log-success {
color: #468847;
background: #DFF0D8;
border: 1px solid #D6E9C6;
}
<script src="http://fabien-d.github.io/alertify.js/assets/js/lib/alertify/alertify.min.js"></script>
<button type="button" class="btn btn-danger" onClick="CheckDelete();"><i class="fa fa-remove"></i> Delete</button>

HTML5 number input field with currency symbol in the end of it

I would like to have a html5 number input field containing the EUR sign, and no matter what editing occurs to the field, for the sign to be persistent. I tried to do that, but the EUR sign won't appear inside the field, I want to move this sign at the end of the input but for some reason, I can't do it. I don't want to remove class form-control. Any help?
My snippet:
.input-symbol-euro {
position: relative;
}
.input-symbol-euro input {
padding-right: 15px;
}
.input-symbol-euro:after {
position: absolute;
top: 0;
content: "€";
right: 0px;
}
.form-control {
display: block;
width: 50%;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>

You need to give the <span> some sort of useful display property so that it will wrap the <input>. By default this element has a value of inline. In the example below I've used inline-block, but block would do just fine.
See updated fiddle.
.input-symbol-euro {
position: relative;
display: inline-block;
width: 50%;
}
.input-symbol-euro input {
padding-right: 15px;
width: 100%;
}
.input-symbol-euro:after {
position: absolute;
top: 50%;
transform: translateY(-50%);
margin: auto;
content: "€";
right: 20px;
}
.form-control {
display: block;
height: 34px;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
-webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
-o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.form-control:focus {
border-color: #66afe9;
outline: 0;
-webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px rgba(102, 175, 233, .6);
}
.form-control[disabled],
.form-control[readonly],
fieldset[disabled] .form-control {
cursor: not-allowed;
background-color: #eee;
opacity: 1;
}
<span class="input-symbol-euro">
<input type="number" value="0" min="0" step="1" class="form-control" />
</span>