Nová ukázka
Reset
Načíst z URL
Uložit a získat odkaz
Vztahuje se k…
Nevyplňujte
Napiště „nejsem robot“
▶
Přepnout zobrazení
Výsledek
<form class="search-form"> <input type="search" id="search" name="search" maxlength="40" placeholder="Search..."> <div class="div-search-button"> <a href="nieco" id="id-cancel-search" class="btn btn-danger btn-sm cancel-search"> <i class="fa fa-times-rectangle-o fa-2x" title="Cancel search"></i>Cancel search </a> </div> <div class="help-block with-errors red" id="search-error"></div> </form>
HTML
Autoformát
Standardní režim
Mobilní zobrazení
.search-form { margin-top: 15px; margin-left: 5px; white-space: nowrap; } .div-search-button { white-space: nowrap; overflow: hidden; height: 100%; display: inline; } input { outline: none; } input[type=search] { -webkit-appearance: textfield; -webkit-box-sizing: content-box; font-family: inherit; font-size: 100%; } input::-webkit-search-decoration, input::-webkit-search-cancel-button { display: none; } input[type=search] { background: #ededed url(https://static.tumblr.com/ftv85bp/MIXmud4tx/search-icon.png) no-repeat 9px center; border: solid 1px #ccc; padding: 9px 10px 9px 32px; width: 65px; -webkit-border-radius: 5px; /* 10em */ -moz-border-radius: 5px; /* 10em */ border-radius: 5px; /* 10em */ -webkit-transition: all .5s; -moz-transition: all .5s; transition: all .5s; } input[type=search]:focus { width: 65%; /* 130px */ background-color: #fff; border-color: #6a9355; /* #66CC75 */ -webkit-box-shadow: 0 0 5px rgba(109,207,246,.5); -moz-box-shadow: 0 0 5px rgba(109,207,246,.5); box-shadow: 0 0 5px rgba(109,207,246,.5); } input:-moz-placeholder { color: #998877; } input::-webkit-input-placeholder { color: #998877; }
CSS
Autoformát
CSS reset
Až na konci
J
ava
S
cript
Autoformát
jQuery
Umístění JS
window.onload
</head>
</body>