JSFiddle - React, Tailwind, and code Playground

by ivawzh

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.min.css">
<p>My try</p>
<form id="search-form" class="navbar-form navbar-left" role="search">
    <div class="right-inner-addon"> 
        <i class="glyphicon glyphicon-search search-submit"></i>
        <input type="search" class="form-control search-field" placeholder="search" />
    </div>
</form>

CSS

.right-inner-addon {
    position: relative;
}
.right-inner-addon input {
    padding-right: 30px;
    background-color:#303030;
    font-size: 13px;
    color:white;
}
.right-inner-addon i {
    position: absolute;
    right: 0px;
    padding: 10px 12px;
    /*  pointer-events: none; */
    cursor: pointer;
    color:white;
}




/* do not group these rules*/
.search-field::-webkit-input-placeholder {
    color: white;
}
FF 4-18 
.search-field:-moz-placeholder {
    color: white;
}
FF 19+ 
.search-field::-moz-placeholder {
    color: white;
}
IE 10+ 
.search-field:-ms-input-placeholder {
    color: white;
}

JavaScript

$(function () {
    $(".search-submit").click(function () {
        $("#search-form").submit();
    });
});