টাইটেনিয়াম সার্চ বক্স

আসসালামু আলাইকুম,
কেমন আছেন? আমি তেমন একটা নেই।
যা হোক, সেগুলো নিয়ে আলাপ করে তেমন কোন লাভ নেই।
অ্যাক্টিভ বাটন

হোভার বাটন

ব্যাকগ্রাউন্ড





আজও একটা নতুন সার্চ বক্স ডিজাইন করলাম, সেটা আপনাদের ফ্রিতে দেবো।

কোড,

<style>
#searchbox {
    background: url(https://4.bp.blogspot.com/-XAd6x1m3W5o/Va-s7EUuPwI/AAAAAAAABK8/8KtGYchxlRA/s320/searchbar.png) no-repeat;
    width: 360px;
    height: 51px;
}
input:focus::-webkit-input-placeholder {
    color: transparent;
}
input:focus:-moz-placeholder {
    color: transparent;
}
input:focus::-moz-placeholder {
    color: transparent;
}
#searchbox input {
    outline: none;
}
#searchbox input[type="text"] {
    background: transparent;
    margin: 3px 0px 0px 20px;
    padding: 5px 0px 5px 0px;
    border-width: 0px;
    font-family: "siyam rupali";
    font-size: 20px;
    color: black;
    width: 80%;
    display: inline-table;
    vertical-align: center;
}
#button-submit {
    background: url(https://2.bp.blogspot.com/-IOpU9pn9mwE/Va-s6wh8MjI/AAAAAAAABK4/YUCt-yFF73U/s1600/magnifier.png) no-repeat;
    border-width: 0px;
    cursor: pointer;
    margin-left: 10px;
    margin-top: 4px;
    width: 23px;
    height: 27px;
vertical-align: center;
}
#button-submit:hover {
    background: url(https://2.bp.blogspot.com/-f5BFRUeyav0/Va-s7Itrf0I/AAAAAAAABLA/EnB7P7zcnXM/s1600/popo.png) no-repeat;
}
#button-submit:active {
    background: url(https://2.bp.blogspot.com/-IOpU9pn9mwE/Va-s6wh8MjI/AAAAAAAABK4/YUCt-yFF73U/s1600/magnifier.png) no-repeat;
    outline: none;
}
#button-submit::-moz-focus-inner {
    border: 0;
}
</style>
<form id="searchbox" method="get" action="/search" autocomplete="off">
    <input name="q" type="text" size="15" placeholder="সার্চ করুন..." />
    <input id="button-submit" type="submit" value="" />
</form>


শেয়ার করুন

লেখকঃ

আমি তাওসিফ তুরাবি, অনলাইনাম (অনলাইন + নাম) ব্লগার তাওসিফ। এখন, ২০১৬ পর্যন্ত আমি ১৬ বছরের এক কিশোর। পড়াশোনা করি শহীদ পুলিশ স্মৃতি কলেজে। টেক ব্লগ লিখতে ভালবাসি। সাইন্স ফিকশন আর গল্প লিখতে পছন্দ করি।  জিআর+ ব্লগের এর একজন প্রতিষ্ঠাতা অ্যাডমিন।
আমাদের একটা ওয়েব ডেভেলপার ফার্ম আছে যার নাম জিআর+ আইটি বাংলাদেশ
এছাড়া আমার ব্যাক্তিগত ব্লগ রয়েছে। আমার ফেসবুক আইডিতে আমার সাথে সর্বক্ষণ যোগাযোগ করতে পারবেন। 


পূর্ববর্তী পোষ্ট
পরবর্তী পোষ্ট