css only half text box is showing? - html

Question

Just got this search button from codepen, Tried placing it in my website and boom, Doesn't work! I've had a mess around and i can't see what the issue is,
What happens is the animations plays lovely! The search bar loads, But when typing, You can only see half the text, See image below
Heres my code
$brand: #b3c33a;
$speed: 0.5s;
body {
color: $brand;
background-color: #333;
}
.search {
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
width: 600px;
}
svg {
position: absolute;
transform: translateX(-246px);
width: 600px;
height: auto;
stroke-width: 8px;
stroke: $brand;
stroke-width: 1px;
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transition: all 0.5s ease-in-out;
stroke-linejoin: round;
stroke-linecap: round;
}
.input-search {
position: absolute;
width: calc(100% - 148px);
height: 64px;
top: 0;
right: 20px;
bottom: 0;
left: 0;
border: none;
background-color: transparent;
outline: none;
padding: 20px;
font-size: 50px;
}
.search-label {
position: absolute;
display: block;
width: 108px;
height: 108px;
top: 0;
left: 50%;
margin-left: -54px;
z-index: 100;
transition: $speed ease-in-out;
}
.isActive {
.search-label {
transform: translateX(246px);
}
svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
&.full svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
}
.full {
.search-label {
transform: translateX(246px);
}
svg {
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transform: translateX(0);
}
}
<div class="col-md-10">
<div class="search">
<svg version="1.1" viewBox="0 0 142.358 24.582">
<path id="search-path" fill="none" d="M131.597,14.529c-1.487,1.487-3.542,2.407-5.811,2.407
c-4.539,0-8.218-3.679-8.218-8.218s3.679-8.218,8.218-8.218c4.539,0,8.218,3.679,8.218,8.218
C134.004,10.987,133.084,13.042,131.597,14.529c0,0,9.554,9.554,9.554,9.554H0"/>
</svg>
<label for="search" class="search-label"></label>
<input type="search" id="search" autocomplete="off" class="input-search"/>
</div>
<script type="text/javascript">
/*
Inspired by Dribble "Search..."
By: Anish Chandran
Link: http://drbl.in/nRxe
*/
var searchField = $('.search');
var searchInput = $("input[type='search']");
var checkSearch = function(){
var contents = searchInput.val();
if(contents.length !== 0){
searchField.addClass('full');
} else {
searchField.removeClass('full');
}
};
$("input[type='search']").focus(function(){
searchField.addClass('isActive');
}).blur(function(){
searchField.removeClass('isActive');
checkSearch();
});
</script>
</div>
CSS Only (not scss)
body {
color: #b3c33a;
background-color: #333;
}
.search {
position: absolute;
top: 50%;
left: 50%;
margin-left: -300px;
margin-top: -54px;
width: 600px;
}
svg {
position: absolute;
transform: translateX(-246px);
width: 600px;
height: auto;
stroke-width: 8px;
stroke: #b3c33a;
stroke-width: 1px;
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transition: all 0.5s ease-in-out;
stroke-linejoin: round;
stroke-linecap: round;
}
.input-search {
position: absolute;
width: calc(100% - 148px);
height: 64px;
top: 0;
right: 20px;
bottom: 0;
left: 0;
border: none;
background-color: transparent;
outline: none;
padding: 20px;
font-size: 50px;
}
.search-label {
position: absolute;
display: block;
width: 108px;
height: 108px;
top: 0;
left: 50%;
margin-left: -54px;
z-index: 100;
transition: 0.5s ease-in-out;
}
.isActive .search-label {
transform: translateX(246px);
}
.isActive svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.isActive.full svg {
stroke-dashoffset: -65;
stroke-dasharray: 141.305 65;
transform: translateX(0);
}
.full .search-label {
transform: translateX(246px);
}
.full svg {
stroke-dashoffset: 0;
stroke-dasharray: 64.6 206.305;
transform: translateX(0);
}

Answer 1

That's not pure CSS, so wouldn't output correctly in your browser. They used SASS (http://sass-lang.com/), so you would need to compile the SASS to CSS first if you want to use it, or look for the pure CSS output (Which should be available if you copied it from Codepen)