다음 검색창은 순수 CSS만으로는 구현이 불가능합니다.
+ 다음검색창은 이미지형식입니다. 다만 이코드는 Base64형식..
<style>
body { background: white; }
.box_search {
margin: 0; padding: 0;
width: 444px;
overflow: hidden;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXoAAAAnCAYAAAABx4MNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADYSURBVHja7NQ7CsJAAEXRN0Fi/GCtuP/VpLOzGLCzC2i6aeI6HM5Zwi1u+Xy/W329U5+PANCfMs/zdr3dczpOagB0aNday+VyzrTfZxgGRQB6G32SHKYppRQ1ADo0JDF5gN5HD4DRA2D0ABg9AEYPgNEDYPQAGD2A0QNg9AAYPQBGD4DRA2D0ABg9gNEDYPQAGD0ARg+A0QNg9AAYPYDRSwBg9AAYPQBGD4DRA2D0ABg9AEYPYPQAGD0A/zH6cRyzrqsSAJ0qy7Jstda01tQA6NAPAAD//wMARAsco4Q7s7oAAAAASUVORK5CYII=');
}
.box_search_on {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAXoAAAAnCAYAAAABx4MNAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAADrSURBVHja7NSxDQFhGIDh7z+n4EJnAYUVJBJLGMFGChtYwQA67XWiukqjkYtISOQ3hz/PM8JbvKntPvlwesbllgKA8qTt/pE3y2Gs5m81AApU3/sc68U3xqNJ1HWtCEBpo4+IaMZNDAaVGgAFqiLC5AFKHz0ARg+A0QNg9AAYPQBGD4DRA2D0AEYPgNEDYPQAGD0ARg+A0QNg9ABGD4DRA2D0ABg9AEYPgNEDYPQARi8BgNEDYPQAGD0ARg+A0QNg9AAYPYDRA2D0APzH6GfTFOfrWwmAQqW2++Td8RX3PqsBUKAfAAAA//8DABkaHPQpAjoqAAAAAElFTkSuQmCC');
}
.tf_keyword {
float: left;
margin: 10px 10px 0;
padding: 0; border: 0;
width: 358px; height: 20px;
color: #333;
font-weight: bold;
font-size: 16px;
line-height: 18px;
background-color: transparent;
outline: none;
}
.btn_search {
float: left;
overflow: hidden;
margin: 0; padding: 0; border: 0;
width: 66px; height: 39px;
cursor: pointer;
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAnCAIAAAA0DwlWAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAOLSURBVHja7FhNaFxVFP7u39z37sxkOozSWlJoSm2oIlSIP7E6UEQpiBFaslAMBUEX3VgEd1ll6c5NoQsR7EoQwUCJCqZgFYskKKkoNjSmUm3aSQsz7//vXhdPqwF3c1M7Moe7eH+8+75zznfO9w6ZmluH3IGBtftqePMFxQG0mo3BhRGn+bvnAg7AmMFFgYrgnduG4n9hQxj3knEAeqDJAWgz5MYQhmUzWnMAWtt/dRAFcZrpIgdAGZe8olxJKdtGilsHQHX88mF1aKz24C4B4Nqt/JvL6fxS14+cWlUNAAzPDyb2FW+92FIVcufiaItPT/KpCfe9L/zPLwX1WtV2pdI2ueEH4aN789njjTsYVjey1Y2sPJaCnDxaf/4R4wfhvRsNrQuG6O2XWuXpueXw/fNhmDMAnOiZtjs9qQC8/lx1ec3zM10R1DIMK+0vjJJXDqsyDouXojOLhSubTUUA5Lk5+1UIhNOTSjB67AlxZjHk3GZqWXNJkqeHxgSAJDOnPwucisP5n6nFOXGlOvtl1As1gGcOOmka2+SGtscNXeR772cAfv49D3MmxJbayjnR4D9eywCMKFrh1G6Vt5mgWUEGvotTxn+7nQMY38050XlutsYdMMlDowJAL9Rprqk9B5oyqbS2sCpMfP9LVhbWmbYbx2GWFeWtLCuCKDjWdkcUBXDhp1gKx8qm5bIZDSndD78Ow9QAmJ5UbzzL4rjX9btdvxvHvZmn2WtP1csnr3YKQ6C1tb8DYwyZmltXzT22ZMjj+/Ts8b8HFKsbWZTg4CgTbIu/Tn/qLazAlQ5jFlRW5+Z1Nn7kFJMjxqD/JbhY7+RrG/HEfikYAdCqsZ07GKMEQFbotZt5q8YAPLZfClosXUkooYTQPveNQp+NHznFnRFb8RVcXN3M57/1CEFDkZIMN7rFwnfxO594H12Mdjfp2E4B4OE9YlfDnP/BE1zQ/vgeBh6Zmlt3GqOWtZoukiz5Z48TwnEq0hgTp/GJtiiFCYCLl5O5j8O66suPm53rfFuqOGWuVK78F03uSveDC0mn6508Wgfw5AHZqvqRNoz01XNKTXUXGxVhUroLKxHgvdquLl1JOj1dr5E+v4HjrhsBcaRaWAnnl29RxpVT61sHFRzAfzLekVLJv7Ku/w8Y+BnucMAzhLGNAx4z4OQodDFMqiEMi5amQbPKOIDNG78OLgxX0NmZB/4YAEA5JT5MGj3kAAAAAElFTkSuQmCC');
}
.btn_search:hover {
background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEIAAAAnCAYAAAC7bZ4BAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAIGNIUk0AAHolAACAgwAA+f8AAIDpAAB1MAAA6mAAADqYAAAXb5JfxUYAAAOtSURBVHja7JlNbFVFFMd/M3M/3rv2g/BCIFATG6ykuukCxWKMYiRxVVZV4gYX6oKVG9ZVdm7cmMBGE5dGN2IsVhvZYCwhLZqYoBZswFAD1Yf4Xt9993PGxW1f+miNX7m3au9JZjN3kjnzn//5zznnirGT18wvrZStajv6FRPP70aMnbxmKv0DWxaIIFiG8A4WgDF6ywLhuh43b9eRlAZQArFqK6FhSkaUXCiBKEOjZMQfMULrYvOIKApIdIJJs32Fkkhl4VoOQhR/N0nQzIAoLIuLAzwr5diTHiODPQztsgG4UU+YmY/4cLZNvSWp2JXNYURRIBzYKzhxpIbniK5vAzWL8VGLsf1V3v5smY++CgoHo5AUO0wiDuwVTIxv65q/cjMG6DDDtQXHn+kFmkzO+Thu5f/DCGMMnpVy4kitMzc553N6epkkzZihkLzwVJXxUQ+Alw7fw8yViEZbI2UxmiFXnc1rxFHIc495nXA493WbN6daSOlScapUnCrKtnjnXJv3Z3wAbCU5erBKGAe5+rY6CgEiRTMymFE/jA1vTDZxlI1AdtYIZAeMhp+F6ePDFUyqiwUi19BINfftUAB892NCkgqEVOvWCSQpmss3Mt3o8ySWsorWiHzFMk4FdtfZ/9x+QqW5+9b9auh8U+zF2wlDu2z27bawlCFNNVKIDdc+OJCFUcPXxJFBOqY4sczThJKcXwg6z+OxJ3pIdIJeU99oYwijkGcPVejzMpfOfxMglCw2NHSORZclLc5+EXJ0fw+eIxgf9fAcOD29TBitCJWUvHi4t/N8Alz/KcWkGi3zZ0Qc+lnzNrX68t0ojjg47G6YULVDGB5Q2Bvc/qmpJmcu+ljKQuSYT9z64VvUvkOvvKqxwZjchpSS60sxC0sJjwy52CrTh1qPYuc2hZJiRVQ1C0sJtZ5MWR++36XiSGavBhhhEIZc/Gs16itACCd/MVoB4+ylACGg3xMdPbj1a8rHXwa89l6DDy747NmuGNyZieZD99rs2a74/HIAAsTviOw/sVajnoVGJLxCCxytNeau0l9I2UmntdbrNOPCfMjEu3dySbl/Xry6OY0ZKSXKsrrG2gNKKXlrusmpqWZn7tEHXHo99d8vw/8OWGcu+viR5uWne5n9PqTpp7kVYZvSofor9ukln0/mWgghEFLm5uu/lhFrtUMUwcCybdtVa+gtD0TJCCAO2+UPnruatyUQZWiUjCgZsa5F4PXVMkbUF+e3LBC2W+X14yP8NgB+dtwcbAv6ZAAAAABJRU5ErkJggg==');
}
</style>
<script src="//code.jquery.com/jquery.min.js"></script>
<script>
$(function() {
$('.tf_keyword')
.focus(function() {
$('.box_search').addClass('box_search_on');
})
.blur(function() {
$('.box_search').removeClass('box_search_on');
});
});
</script>
<form>
<div class="box_search">
<input type="text" class="tf_keyword" title="검색어 입력" />
<button type="submit" class="btn_search"></button>
</div>
</form>