Hazır Textbox Css Örnekleri

ÖRNEK 1

<input class="textbox"type="text"> //HTML KODU <br><br> <style> .textbox { font-family: Arial, Helvetica, sans-serif; background: rgba(255, 255, 255, 0.44); color: #333; //CSS KODU border: 1px solid #A4A4A4; padding: 4px 8px 4px 4px !important; line-height: 1; width: 275px; height:25px; } .textbox:hover { border: 1px solid #FF00FF; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); } .textbox:focus { border: 1px solid #4d90fe; outline: none; box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -moz-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0px 1px 2px rgba(0,0,0,0.3); background: rgb(255, 255, 255); } </style>


ÖRNEK 2

<input class="textbox"type="text"> <style> .textbox1 { background: white; border: 1px solid #ffa853; border-radius: 5px; box-shadow: 0 0 5px 3px #ffa853; color: #666; outline: none; height:23px; width: 275px; } </style>


ÖRNEK 3

<b>//HTML KODU</b> <input class="textbox"type="text"> <br><br> <style> .textbox2 { border-top: solid 1px #8e8e8e; border-right: solid 1px #d1d1d1; border-left: solid 1px #d1d1d1; <b>// CSS KODU</b> border-bottom: solid 1px #e4e4e4; height: 25px; width: 275px; } .textbox2:focus { border-color: #4488cc; border-style: solid; border-width: 2px; outline: 0; } </style>


ÖRNEK 4

<input class="textbox4"type="text"> <style> .textbox4 { background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABgAAAAYCAYAAADgdz34AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyBpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMC1jMDYwIDYxLjEzNDc3NywgMjAxMC8wMi8xMi0xNzozMjowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNSBXaW5kb3dzIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjYxRDEzQTBCMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjYxRDEzQTBDMzI0MzExRTFBNDYzRkQ4Qzc3RDdBOTg5Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NjFEMTNBMDkzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NjFEMTNBMEEzMjQzMTFFMUE0NjNGRDhDNzdEN0E5ODkiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz52VTCHAAABFUlEQVR42uxV0Q2DIBBV4z8bdAM26AZ1Ap3AToAT6AR1Ap2gbuAGzKD/TkCP5NmQRpQaSH96yQsJHO/k7t0ZK6WikJZEgS14gHSeZxX6BQuhwerL3pw6ACMIQkuQHsgluDQnM2ugN3rgrK33ha3INdbqBHn1wWFVUU7ghMKxLgt8Oe46yVQ7lrgoD/JdwDf/tg+ueK4mGDfOR5zV8D3VaBwFy6CM1VrsCfjYG81BclrPHVZp7HcoLN8LshdgNMg50pDh7In+uSCIsKUpnqZJWfQ8EB4gOlLRnXBzVVFvpIA5yJTBV241aeLSLI622aRmiho8k3uYRcM6LlLksEWzMA/DjqP4+oNLW5G9Wfz/J/88wEuAAQA9yExzBAEQqwAAAABJRU5ErkJggg==) no-repeat 245px 0 #FFF; height: 25px; width: 275px; border: 1px solid #848484; } </style>


ÖRNEK 5

<input class="textbox5"type="text"> <style> .textbox5 { padding: 1px 20px; border: 0; height: 25px; width: 275px; border-radius: 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px; box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -moz-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -webkit-box-shadow: 1px 1px 0 0 #FFF, 5px 5px 40px 2px #BBB inset; -webkit-background-clip: padding-box; outline: 0; } </style>


ÖRNEK 6

<input type="text" class="textbox6"> <style> .textbox6 { background: #ccc; border: 1px solid #666; box-shadow: 0 0 5px #666 inset; color: #333; float: left; padding: 7px 10px; width: 275px; outline: none; } </style>


ÖRNEK 7

<input class="textbox7"type="text"> <br><br> <style> .textbox7 { width: 275px; border: solid 1px #ccc; height: 26px; background: #5E768D; background: -moz-linear-gradient(top, #546A7F 0%, #5E768D 20%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #546A7F), color-stop(20%, #5E768D)); border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -moz-box-shadow: 0 1px 0 #f2f2f2; -webkit-box-shadow: 0 1px 0 #F2F2F2; font-family: sans-serif; font-size: 16px; color: #F2F2F2; text-transform: uppercase; text-shadow: 0 -1px 0 #334F71; } .textbox7:focus { background: #728EAA; background: -moz-linear-gradient(top, #668099 0%, #728EAA 20%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #668099), color-stop(20%, #728EAA)); outline: 0; } </style>


ÖRNEK 8

<input class="textbox"type="text"> <style> .textbox8 { height: 25px; width: 275px; border: 1px solid #B9BDC1; color: #797979; -moz-box-shadow: 0 2px 4px #bbb inset; -webkit-box-shadow: 0 2px 4px #BBB inset; box-shadow: 0 2px 4px #BBB inset; -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; } .textbox8:focus { background-color: #E7E8E7; outline: 0; } </style>


ÖRNEK 9


<input type="text"class="inputs" placeholder="e-mail" /> <br> <input type="password" class="inputs"placeholder="Password" /> <style> .inputs { -webkit-border-radius: 3px; -moz-border-radius: 3px; -ms-border-radius: 3px; -o-border-radius: 3px; border-radius: 3px; -webkit-box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -moz-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -ms-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -o-box-shadow: 0 1px 0 #fff, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; box-shadow: 0 1px 0 #FFF, 0 -2px 5px rgba(0, 0, 0, 0.08) inset; -webkit-transition: all 0.5s ease; -moz-transition: all 0.5s ease; -ms-transition: all 0.5s ease; -o-transition: all 0.5s ease; transition: all 0.5s ease; background: #EAE7E7; border: 1px solid #C8C8C8; color: #777; font: 13px Helvetica, Arial, sans-serif; margin: 0 0 10px; padding: 15px 10px 15px 40px; width: 270px; } .inputs:focus { -webkit-box-shadow: 0 0 2px #ED1C24 inset; -moz-box-shadow: 0 0 2px #ed1c24 inset; -ms-box-shadow: 0 0 2px #ed1c24 inset; -o-box-shadow: 0 0 2px #ed1c24 inset; box-shadow: 0 0 2px #ED1C24 inset; background-color: #FFF; border: 1px solid #ED1C24; outline: none; } </style>


ÖRNEK 10




<input type="text"class="inputs1" placeholder="Name"> <br><br> <input type="text"class="inputs1" placeholder="e-mail"> <br><br> <input type="password" class="inputs1"placeholder="Password"> <style> .inputs1 { background: #1F2124; background: -moz-linear-gradient(#1F2124, #27292C); background: -ms-linear-gradient(#1F2124, #27292C); background: -o-linear-gradient(#1F2124, #27292C); background: -webkit-gradient(linear, 0 0, 0 100%, from(#1F2124), to(#27292C)); background: -webkit-linear-gradient(#1F2124, #27292C); background: linear-gradient(#1F2124, #27292C); border: 1px solid #000; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1); border-radius: 3px; font-family: 'Ubuntu', 'Lato', sans-serif; color: #FFF; width: 270px; height: 25px; } .inputs1:focus { box-shadow: inset 0 0 2px #000; background: #494D54; border-color: #51CBEE; outline: none; } </style>

Paylaş

Yazar : KODBLOGCUM

Benzer Yayınlar