<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <!------ Include the above in your HEAD tag ----------> <div class="container"> <div class="row"> <h2>Bootstrap inline search button and Placeholder color change</h2> </div> <div class="row"> <div class="input-group"> <input type="text" placeholder="Search here" class="form-control box-placeholder"> <span class="input-group-append"> <button class="btn btn-info p-0 border-0 border px-4 font-weight-bold" type="button"> Search </button> </span> </div> </div> </div>

.box-placeholder::-webkit-input-placeholder { /* WebKit, Blink, Edge */ color: #ddd; } .box-placeholder:-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #000; opacity: 1; } .box-placeholder::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #000; opacity: 1; } .box-placeholder:-ms-input-placeholder { /* Internet Explorer 10-11 */ color: #000; } .box-placeholder::-ms-input-placeholder { /* Microsoft Edge */ color: #000; } .box-placeholder::placeholder { /* Most modern browsers support this now. */ color: #000; }