Cómo crear un TextBox con autocompletar con jQuery
El elemento <input> de HTML lo puedes utilizar para crear controles interactivos en formularios basados en web con el fin de aceptar datos del usuario. Una nueva característica en HTML5 que incluye el input es el elemento <datalist>, la cual te permite crear listas desplegables de autocompletar nativas para tus aplicaciones web.
Ejemplo de autocompletar con jQuery:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>How To Create Autocomplete on an Input Field</title>
<link rel="stylesheet" type="text/css" href="css/smart-forms.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js" integrity="sha256-xNjb53/rY+WmG+4L6tTl9m6PpqknWZvRt0rO1SRnJzw=" crossorigin="anonymous"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
var countryTags = [
"Albania",
"Algeria",
"Andorra",
"Angola",
"Australia",
"Austria",
"Bahamas",
"Bahrain",
"Bangladesh",
"Barbados",
"Belarus",
"Belgium",
"Belize",
"Benin",
"Botswana",
"Brazil",
"Burma",
"Burundi",
"Cambodia",
"Cameroon",
"Canada",
"Chad",
"Chile",
"China",
"Colombia",
"Comoros",
"Congo"
];
$("#countryList").autocomplete({
source: countryTags
});
var smartTags = [
"ActionScript",
"AppleScript",
"Asp",
"BASIC",
"C",
"C++",
"Clojure",
"COBOL",
"ColdFusion",
"Erlang",
"Fortran",
"Groovy",
"Haskell",
"Java",
"JavaScript",
"Lisp",
"Perl",
"PHP",
"Python",
"Ruby",
"Scala",
"Scheme"
];
function split(val) {
return val.split(/,\s*/);
}
function extractLast(term) {
return split(term).pop();
}
$("#multipleTags")
.bind("keydown", function (event) {
if (event.keyCode === $.ui.keyCode.TAB &&
$(this).autocomplete("instance").menu.active) {
event.preventDefault();
}
})
.autocomplete({
minLength: 0,
source: function (request, response) {
response($.ui.autocomplete.filter(
smartTags, extractLast(request.term)));
},
focus: function () {
return false;
},
select: function (event, ui) {
var terms = split(this.value);
terms.pop();
terms.push(ui.item.value);
terms.push("");
this.value = terms.join(", ");
return false;
}
});
});
</script>
<style>
@import url(https://fonts.googleapis.com/css?family=Roboto:100,100i,300,300i,400,400i,500,700,700i,900);html,body{border:0;margin:0;padding:0}.smart-wrap{padding:0 20px}.smart-forms,.smart-forms *{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}.smart-forms{font-family:"Roboto",Arial,Helvetica,sans-serif;line-height:1.231;font-weight:400;font-size:14px;color:#34495E}.smart-container{background:#fff;margin:50px auto;-webkit-box-shadow:0 1px 5px rgba(0,0,0,.65);-moz-box-shadow:0 1px 5px rgba(0,0,0,.65);-o-box-shadow:0 1px 5px rgba(0,0,0,.65);box-shadow:0 1px 5px rgba(0,0,0,.65);-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.wrap-0{max-width:952px}.wrap-1{max-width:852px}.wrap-2{max-width:652px}.wrap-3{max-width:452px}.smart-forms .section{margin-bottom:22px}.smart-forms .smart-link{color:#1ABC9C;text-decoration:none}.smart-forms .smart-link:hover{text-decoration:underline}.smart-forms .tagline{height:0;border-top:1px solid #D9DDE5;text-align:center}.smart-forms .tagline span{text-transform:uppercase;display:inline-block;position:relative;padding:0 15px;background:#fff;color:#1ABC9C;top:-10px}.smart-forms .field{display:block;position:relative}.smart-forms .field-icon i{color:#A2A6A8;position:relative;top:0}.smart-forms .field-label{display:block;margin-bottom:7px}.smart-forms .field-label.colm{padding-top:12px}.smart-forms .field-label em{color:#e74c3c;font-size:14px;font-style:normal;display:inline-block;margin-left:4px;position:relative;top:3px}.smart-forms .form-header{overflow:hidden;position:relative;padding:25px 30px;-webkit-border-radius:5px 5px 0 0;-moz-border-radius:5px 5px 0 0;-o-border-radius:5px 5px 0 0;border-radius:5px 5px 0 0}.smart-forms .form-header h4{font-family:"Roboto",Arial,Helvetica,sans-serif;text-align:left;font-weight:300;font-size:32px;padding:0;margin:0}.smart-forms .form-header h4 i{font-size:38px;position:relative;margin-right:10px;top:2px}.smart-forms .header-primary{background-color:#1ABC9C;border-top:1px solid #23E0BA;border-bottom:5px solid #16A085}.smart-forms .header-lite{background:#F3F5FA;border-top:1px solid #23E0BA;border-bottom:1px solid #D9DDE5}.smart-forms .header-lite:before{content:"";background-color:#1ABC9C;position:absolute;height:8px;z-index:1;top:0;right:0;left:0}.smart-forms .header-primary h4{color:#fff}.smart-forms .header-lite h4{color:#5D6A87;padding-top:5px}.smart-flat,.smart-flat .form-header{-webkit-border-radius:0;-moz-border-radius:0;-o-border-radius:0;border-radius:0}.smart-forms .form-body{padding:40px 30px;padding-bottom:20px}.smart-forms .form-footer{overflow:hidden;padding:20px 25px;padding-top:25px;background:#F3F5FA url(../images/foobg.png) top left repeat-x}.smart-forms input[type=search]{-webkit-appearance:textfield}.smart-forms ::-webkit-search-decoration,.smart-forms ::-webkit-search-cancel-button{-webkit-appearance:none}.smart-forms input::-webkit-input-placeholder,.smart-forms textarea::-webkit-input-placeholder{color:#919DA8}.smart-forms input:focus::-webkit-input-placeholder,.smart-forms textarea:focus::-webkit-input-placeholder{color:#D6DBE0}.smart-forms input:-moz-placeholder,.smart-forms textarea:-moz-placeholder{color:#919DA8}.smart-forms input:focus:-moz-placeholder,.smart-forms textarea:focus:-moz-placeholder{color:#D6DBE0}.smart-forms input::-moz-placeholder,.smart-forms textarea::-moz-placeholder{color:#919DA8;opacity:1}.smart-forms input:focus::-moz-placeholder,.smart-forms textarea:focus::-moz-placeholder{color:#D6DBE0;opacity:1}.smart-forms input:-ms-input-placeholder,.smart-forms textarea:-ms-input-placeholder{color:#919DA8}.smart-forms input:focus:-ms-input-placeholder,.smart-forms textarea:focus:-ms-input-placeholder{color:#D6DBE0}.smart-forms label,.smart-forms input,.smart-forms button,.smart-forms select,.smart-forms textarea{margin:0;font-size:14px;font-family:"Roboto",Arial,Helvetica,sans-serif;font-weight:400;color:#34495E;outline:none}.smart-forms .gui-input,.smart-forms .gui-textarea,.smart-forms .select>select,.smart-forms input[type="button"],.smart-forms input[type="submit"],.smart-forms input[type="search"],.smart-forms .select-multiple select{-webkit-tap-highlight-color:transparent;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-border-radius:0;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none}.smart-forms input[type="search"]::-webkit-search-decoration,.smart-forms input[type="search"]::-webkit-search-cancel-button,.smart-forms input[type="search"]::-webkit-search-results-button,.smart-forms input[type="search"]::-webkit-search-results-decoration{display:none}.smart-forms .switch,.smart-forms .option,.smart-forms .field-label{font-size:14px}.smart-forms .radio,.smart-forms .button,.smart-forms .checkbox,.smart-forms .switch>label{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-o-user-select:none;user-select:none}.smart-forms .radio,.smart-forms .button,.smart-forms .tooltip,.smart-forms .checkbox,.smart-forms .gui-input,.smart-forms .notification,.smart-forms .gui-textarea,.smart-forms .select>select,.smart-forms .select-multiple select,.smart-forms input[type="button"].button,.smart-forms input[type="submit"].button,.smart-forms input[type="search"].gui-input{-webkit-transition:all 0.5s ease-in-out;-moz-transition:all 0.5s ease-in-out;-ms-transition:all 0.5s ease-in-out;-o-transition:all 0.5s ease-in-out;transition:all 0.5s ease-in-out;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;outline:none}.smart-forms .select>select,.smart-forms .select-multiple select{-webkit-transition:none;-moz-transition:none;-ms-transition:none;-o-transition:none;transition:none}.smart-forms .select,.smart-forms .gui-input,.smart-forms .gui-textarea,.smart-forms .select>select,.smart-forms .select-multiple select{background:#fff;position:relative;vertical-align:top;border:2px solid #BDC3C7;display:-moz-inline-stack;display:inline-block;*display:inline;color:#34495E;outline:none;height:42px;width:100%;*zoom:1}.smart-forms .gui-input,.smart-forms .gui-textarea{padding:10px}.smart-forms .gui-textarea{resize:none;line-height:19px;overflow:auto;max-width:100%;height:96px}.smart-forms .input-hint{padding:10px;display:block;margin-top:-4px;line-height:16px;position:relative;background:#F2F4FA;border:2px solid #bdc3c7;border-top:1px solid #bdc3c7;font-family:Arial,Helvetica,sans-serif;-webkit-border-radius:0 0 3px 3px;-moz-border-radius:0 0 3px 3px;-o-border-radius:0 0 3px 3px;border-radius:0 0 3px 3px;font-size:11px;color:#777}.smart-forms .select{border:0;z-index:10}.smart-forms .select>select{display:block;padding:9px 10px;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;text-indent:.01px;text-overflow:'';z-index:10;margin:0}.smart-forms .select>select::-ms-expand{display:none}.smart-forms .select:before,.smart-forms .select:after{content:'';position:absolute;pointer-events:none;z-index:15}.smart-forms .select:before{top:2px;right:2px;width:34px;bottom:2px;background:#F2F4FA;border-left:1px solid #d3dae7;-webkit-border-radius:0 1px 1px 0;-moz-border-radius:0 1px 1px 0;-o-border-radius:0 1px 1px 0;border-radius:0 1px 1px 0}.smart-forms .select .arrow{position:absolute;top:9px;right:5px;width:24px;height:24px;background:#F2F4FA;color:#B5C1C7;pointer-events:none;z-index:16}.smart-forms .select .arrow:after,.smart-forms .select .arrow:before{content:'';position:absolute;font:12px "Consolas",monospace;font-style:normal;pointer-events:none;left:6px}.smart-forms .select .arrow:before{content:'\25BC';bottom:4px}.smart-forms .select .double:after{content:'\25B2';top:-1px}.smart-forms .select .double:before{content:'\25BC';bottom:-1px}.smart-forms .select-multiple select{width:100%;height:123px;padding:10px}.smart-forms .file{display:block;width:100%}.smart-forms .file .gui-file{width:100%;height:100%;cursor:pointer;padding:8px 10px;position:absolute;-moz-opacity:0;opacity:0;z-index:11;bottom:0;right:0}.smart-forms .file .button{position:absolute;top:4px;right:4px;float:none;height:34px;line-height:34px;padding:0 16px;z-index:10}.smart-forms .gui-input:hover,.smart-forms .gui-textarea:hover,.smart-forms .select>select:hover,.smart-forms .select-multiple select:hover,.smart-forms .gui-input:hover~.input-hint,.smart-forms .file .gui-file:hover + .gui-input,.smart-forms .gui-textarea:hover~.input-hint{border-color:#62D0BA}.smart-forms .gui-input:focus,.smart-forms .gui-textarea:focus,.smart-forms .select>select:focus,.smart-forms .select-multiple select:focus{border-color:#1ABC9C;color:#3C3C3C}.smart-forms .gui-textarea:focus{height:120px}.smart-forms .select>select:focus{z-index:10;z-index:20\9}.smart-forms .gui-input:focus~.field-icon i,.smart-forms .gui-textarea:focus~.field-icon i{color:#1ABC9C}.smart-forms .select-multiple select:focus,.smart-forms .gui-input:focus~.input-hint,.smart-forms .gui-textarea:focus~.input-hint,.smart-forms .file .gui-file:focus + .gui-input{border-color:#1ABC9C}.smart-forms .select>select:focus + .arrow{color:#1ABC9C}.smart-forms .option{position:relative;padding-right:15px;display:inline-block;vertical-align:middle}.smart-forms .option>input{position:absolute;height:inherit;width:inherit;opacity:0;left:0}.smart-forms .checkbox,.smart-forms .radio{position:relative;margin-right:2px;background:white;display:inline-block;border:3px solid #B5C1C7;margin-bottom:0;margin-top:0;height:21px;width:21px;top:4px}.smart-forms .checkbox:before,.smart-forms .radio:before{content:'';display:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box;padding:0;margin:0}.smart-forms input:checked + .checkbox:before,.smart-forms input:checked + .radio:before{display:block}.smart-forms .checkbox:before{position:absolute;top:5px;left:4px;width:6px;height:3px;border:solid #1abc9c;border-width:0 0 3px 3px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.smart-forms input:checked + .checkbox,.smart-forms input:checked + .radio{border:3px solid #1abc9c}.smart-forms .radio{-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px}.smart-forms .radio:before{margin:4px;width:8px;height:8px;background:#1abc9c;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px}.smart-forms input:hover + .checkbox,.smart-forms input:hover + .radio{border-color:#62D0BA}.smart-forms input:focus + .checkbox,.smart-forms input:focus + .radio{border-color:#1abc9c}.smart-forms input:focus + .radio:before{background:#1abc9c}.smart-forms input:focus + .checkbox:before{border-color:#1abc9c}.smart-forms .switch{cursor:pointer;position:relative;padding-right:10px;display:inline-block;margin-bottom:5px;height:26px}.smart-forms .switch>.switch-label{cursor:pointer;display:inline-block;position:relative;height:25px;width:58px;color:#fff;font-size:10px;font-weight:400;line-height:20px;text-align:center;background:#B5C1C7;letter-spacing:1px;border:2px solid #B5C1C7;text-transform:uppercase;-webkit-transition:0.3s ease-out;-moz-transition:0.3s ease-out;-o-transition:0.3s ease-out;transition:0.3s ease-out;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;border-radius:2px}.smart-forms .switch>.switch-label + span{display:inline-block;padding-left:5px;position:relative;top:-7px}.smart-forms .switch>.switch-label:before{content:attr(data-off);position:absolute;top:1px;right:3px;width:33px}.smart-forms .switch>.switch-label:after{content:"";margin:1px;width:19px;height:19px;display:block;background:#fff;-webkit-border-radius:1px;-moz-border-radius:1px;-o-border-radius:1px;border-radius:1px}.smart-forms .switch>input{-webkit-appearance:none;position:absolute;width:inherit;height:inherit;opacity:0;left:0;top:0}.smart-forms .switch>input:focus{outline:none}.smart-forms .switch>input:focus + .switch-label{color:#fff;border-color:#a1a6a9;background:#a1a6a9}.smart-forms .switch>input:focus + .switch-label:after{background:#fff}.smart-forms .switch>input:checked + .switch-label{border-color:#1ABC9C;background:#1ABC9C;padding-left:33px;color:white}.smart-forms .switch>input:checked + .switch-label:before{content:attr(data-on);left:1px;top:1px}.smart-forms .switch>input:checked + .switch-label:after{margin:1px;width:19px;height:19px;background:white}.smart-forms .switch>input:checked:focus + .switch-label{background:#16a085;border-color:#16a085}.smart-forms .switch-round>.switch-label{-webkit-border-radius:13px;-moz-border-radius:13px;-o-border-radius:13px;border-radius:13px}.smart-forms .switch-round>.switch-label + span{top:-2px}.smart-forms .switch-round>.switch-label:before{width:33px}.smart-forms .switch-round>.switch-label:after{width:19px;height:19px;color:#B5C1C7;content:"\2022";font:30px/20px Times,Serif;-webkit-border-radius:13px;-moz-border-radius:13px;-o-border-radius:13px;border-radius:13px}.smart-forms .switch-round>input:checked + .switch-label{padding-left:33px}.smart-forms .switch-round>input:checked + .switch-label:after{color:#1ABC9C}.smart-forms .option-group:before,.smart-forms .option-group:after{display:table;content:"";line-height:0}.smart-forms .option-group:after{clear:both}.smart-forms .smart-option-group .option{padding:0;margin:0}.smart-forms .smart-option{border:1px solid #B5C1C7;margin-right:5px;background:#F2F4FA;font-weight:400;text-decoration:none;color:#454545;border-radius:3px;padding:0 20px;display:inline-block;position:relative;line-height:normal;cursor:pointer;vertical-align:middle;text-align:center;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;overflow:hidden;line-height:40px;height:40px}.smart-forms .smart-option-ui{display:inline-block}.smart-forms .smart-option-ui .iconc{position:relative;margin-right:2px;background:#fff;display:inline-block;border:3px solid #B5C1C7;-webkit-border-radius:2px;-moz-border-radius:2px;-o-border-radius:2px;border-radius:2px;margin-bottom:0;margin-top:0;height:21px;width:21px;top:4px}.smart-forms .smart-radio .iconc{-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px}.smart-forms .option>input:checked + .smart-option{border-color:#138871;background:#1ABC9C;color:white}.smart-forms .option>input:checked + .smart-option .fa{font-size:14px}.smart-forms .option>input:checked + .smart-option .iconc{border-color:#138871}.smart-forms .smart-radio .iconc:before,.smart-forms .smart-checkbox .iconc:before{content:'';display:none;-webkit-box-sizing:content-box;-moz-box-sizing:content-box;-o-box-sizing:content-box;box-sizing:content-box;padding:0;margin:0}.smart-forms input:checked + .smart-radio .iconc:before,.smart-forms input:checked + .smart-checkbox .iconc:before{display:block}.smart-forms input:checked + .smart-radio .iconc:before{margin:4px;width:8px;height:8px;background:#138871;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px}.smart-forms input:checked + .smart-checkbox .iconc:before{position:absolute;top:5px;left:4px;width:6px;height:3px;border:solid #138871;-webkit-border-width:0 0 3px 3px;-moz-border-width:0 0 3px 3px;border-width:0 0 3px 3px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.smart-forms .smart-option-list{display:inline-block;vertical-align:top;white-space:nowrap;font-size:0}.smart-forms .smart-option-list.left{float:left}.smart-forms .smart-option-list.right{float:right}.smart-forms .smart-option-list .smart-option{margin-right:0;margin-left:-1px;border-radius:0}.smart-forms .smart-option-list label:first-child .smart-option{margin-left:0;border-radius:3px 0 0 3px}.smart-forms .smart-option-list label:last-child .smart-option{border-radius:0 3px 3px 0}.smart-forms .smart-option-list .option>input:checked + .smart-option{position:relative;z-index:1}.smart-forms .group-vertical,.smart-forms .group-vertical .option,.smart-forms .group-vertical .option .smart-option,.smart-forms .group-vertical .option .smart-option-ui{display:block;text-align:left}.smart-forms .group-vertical .option .smart-option{margin:0;margin-top:-1px}.smart-forms .group-vertical label:first-child .smart-option{border-radius:3px 3px 0 0}.smart-forms .group-vertical label:last-child .smart-option{border-radius:0 0 3px 3px}.smart-forms .smart-option-ui .iconc-pos{-webkit-transition:margin 0.6s,opacity 0.6s;-moz-transition:margin 0.6s,opacity 0.6s;-ms-transition:margin 0.6s,opacity 0.6s;-o-transition:margin 0.6s,opacity 0.6s;transition:margin 0.6s,opacity 0.6s;display:inline-block;margin-right:-80px;position:absolute;right:-200px;opacity:0}.smart-forms .option>input:checked + .smart-option .iconc-pos{opacity:1;right:20px;margin-right:0}.smart-forms .modern-switch{position:relative;display:inline-block;vertical-align:top;margin-right:10px;cursor:pointer}.smart-forms .modern-switch input{position:absolute;clip:rect(1px 1px 1px 1px);clip:rect(1px,1px,1px,1px);overflow:hidden;height:inherit;width:inherit;opacity:0;left:0}.smart-forms .modern-switch .switch-label{display:inline-block;position:relative;top:2px}.smart-forms .modern-switch>.switch-label{padding-right:5px}.smart-forms .modern-switch .switch-toggle + .switch-label{padding-left:5px}.smart-forms .modern-switch .switch-toggle{width:44px;height:16px;background:#B5C1C7;position:relative;display:inline-block;-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 1px rgba(255,255,255,.5);-moz-box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 1px rgba(255,255,255,.5);-o-box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 1px rgba(255,255,255,.5);box-shadow:inset 0 1px 1px rgba(0,0,0,.08),0 1px rgba(255,255,255,.5);-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;vertical-align:middle;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;cursor:pointer}.smart-forms .modern-switch .switch-toggle::before{content:'';position:absolute;top:-6px;left:-4px;width:26px;height:26px;background:#fff;-webkit-box-shadow:0 1px 4px rgba(0,0,0,.18);-moz-box-shadow:0 1px 4px rgba(0,0,0,.18);-o-box-shadow:0 1px 4px rgba(0,0,0,.18);box-shadow:0 1px 4px rgba(0,0,0,.18);-webkit-transition:all 0.4s ease;-moz-transition:all 0.4s ease;-ms-transition:all 0.4s ease;-o-transition:all 0.4s ease;transition:all 0.4s ease;-webkit-border-radius:26px;-moz-border-radius:26px;-o-border-radius:26px;border-radius:26px}.smart-forms .modern-switch input:checked + .switch-toggle{background:#1ABC9C}.smart-forms .modern-switch input:checked + .switch-toggle::before{left:20px;background:#138871}.smart-forms .modern-switch input:disabled + .switch-toggle{background:#D9DEE1;pointer-events:none}.smart-forms .modern-switch input:disabled + .switch-toggle::before{background:#C9D1D6}.smart-forms .modern-switch input:disabled + .switch-toggle + .switch-label{color:#B5C1C7}.smart-forms .modern-ios .switch-toggle{width:40px;height:24px;-webkit-border-radius:50px;-moz-border-radius:50px;border-radius:50px}.smart-forms .modern-ios .switch-toggle::before{width:22px;height:22px;bottom:1px;left:1px;top:1px}.smart-forms .modern-ios input:checked + .switch-toggle::before{left:17px;background:#fff}.smart-forms .modern-ios input:disabled + .switch-toggle::before{background:#f5f5f5}.smart-forms .modern-switch:active .switch-toggle::before,.smart-forms .modern-switch .switch-toggle:active::before{-webkit-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(181,193,199,.2);-moz-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(181,193,199,.2);-o-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(181,193,199,.2);box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(181,193,199,.2)}.smart-forms .modern-switch:active input:checked + .switch-toggle::before,.smart-forms .modern-switch input:checked + .switch-toggle:active::before{-webkit-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(26,188,156,.2);-moz-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(26,188,156,.2);-o-box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(26,188,156,.2);box-shadow:0 2px 8px rgba(0,0,0,.28),0 0 0 20px rgba(26,188,156,.2)}.smart-forms .morph-switch:active .switch-toggle:before,.smart-forms .morph-switch .switch-toggle:active::before,.smart-forms .morph-switch:active input:checked + .switch-toggle::before,.smart-forms .morph-switch input:checked + .switch-toggle:active::before{-webkit-box-shadow:0 1px 4px rgba(0,0,0,.18);-moz-box-shadow:0 1px 4px rgba(0,0,0,.18);-o-box-shadow:0 1px 4px rgba(0,0,0,.18);box-shadow:0 1px 4px rgba(0,0,0,.18);-webkit-transform:scale(1.15,.85);-moz-transform:scale(1.15,.85);-ms-transform:scale(1.15,.85);-o-transform:scale(1.15,.85);transform:scale(1.15,.85)}.smart-forms .button{border:0;height:42px;color:#243140;line-height:1;font-size:15px;cursor:pointer;padding:0 18px;text-align:center;vertical-align:top;background:#bdc3c7;display:inline-block;-webkit-user-drag:none;text-shadow:0 1px rgba(255,255,255,.2)}.smart-forms .button:hover{color:#243140;background:#cacfd2}.smart-forms .button:active{color:#1d2938;background:#a1a6a9}.smart-forms a.button,.smart-forms span.button,.smart-forms label.button{line-height:42px;text-decoration:none}.smart-forms .button i{font-size:14px}.smart-forms .button-list .button{margin-bottom:5px}.smart-forms .btn-primary{background-color:#1abc9c}.smart-forms .btn-primary:hover,.smart-forms .btn-primary:focus{background-color:#48c9b0}.smart-forms .btn-primary:active{background-color:#16a085}.smart-forms .btn-primary,.smart-forms .btn-primary:hover,.smart-forms .btn-primary:focus,.smart-forms .btn-primary:active{color:#fff;text-shadow:0 1px rgba(0,0,0,.08)}.smart-forms .btn-rounded{-webkit-border-radius:22px;-moz-border-radius:22px;-o-border-radius:22px;border-radius:22px}.smart-forms .button-left,.smart-forms .button-right{position:relative;z-index:9}.smart-forms .button-left:before,.smart-forms .button-right:before{content:'';z-index:-1;width:32px;height:32px;position:absolute;background-color:inherit;border-color:inherit;border:none;top:5px}.smart-forms .button-left{border-left-width:0;padding:0 18px 0 7px;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-o-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;margin-left:20px}.smart-forms .button-left:before{left:-15px;-webkit-border-radius:2px 5px 0 5px;-moz-border-radius:2px 5px 0 5px;-o-border-radius:2px 5px 0 5px;border-radius:2px 5px 0 5px;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-ms-transform:rotate(-45deg);-o-transform:rotate(-45deg);transform:rotate(-45deg)}.smart-forms .button-right{padding:0 7px 0 18px;border-right-width:0;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;margin-right:20px}.smart-forms .button-right:before{right:-15px;-webkit-border-radius:5px 2px 5px 0;-moz-border-radius:5px 2px 5px 0;-o-border-radius:5px 2px 5px 0;border-radius:5px 2px 5px 0;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}.smart-forms .btn-pointed.button-left,.smart-forms .btn-pointed.button-right{-webkit-border-radius:22px;-moz-border-radius:22px;-o-border-radius:22px;border-radius:22px}.smart-forms .btn-rounded.button-left{-webkit-border-radius:0 22px 22px 0;-moz-border-radius:0 22px 22px 0;-o-border-radius:0 22px 22px 0;border-radius:0 22px 22px 0}.smart-forms .btn-rounded.button-right{-webkit-border-radius:22px 0 0 22px;-moz-border-radius:22px 0 0 22px;-o-border-radius:22px 0 0 22px;border-radius:22px 0 0 22px}.smart-forms .pushed{-webkit-box-shadow:inset 0 -.3em 0 rgba(0,0,0,.2);-moz-box-shadow:inset 0 -.3em 0 rgba(0,0,0,.2);-o-box-shadow:inset 0 -.3em 0 rgba(0,0,0,.2);box-shadow:inset 0 -.3em 0 rgba(0,0,0,.2);position:relative}.smart-forms .pushed:active{-webkit-box-shadow:inset 0 -.15em 0 rgba(0,0,0,.2);-moz-box-shadow:inset 0 -.15em 0 rgba(0,0,0,.2);-o-box-shadow:inset 0 -.15em 0 rgba(0,0,0,.2);box-shadow:inset 0 -.15em 0 rgba(0,0,0,.2);top:2px}.smart-forms .pushed.button-left:before{-webkit-box-shadow:inset .35em 0 0 rgba(0,0,0,.2);-moz-box-shadow:inset .35em 0 0 rgba(0,0,0,.2);-o-box-shadow:inset .35em 0 0 rgba(0,0,0,.2);box-shadow:inset .35em 0 0 rgba(0,0,0,.2)}.smart-forms .pushed:active.button-left:before{-webkit-box-shadow:inset .2em 0 0 rgba(0,0,0,.2);-moz-box-shadow:inset .2em 0 0 rgba(0,0,0,.2);-o-box-shadow:inset .2em 0 0 rgba(0,0,0,.2);box-shadow:inset .2em 0 0 rgba(0,0,0,.2)}.smart-forms .pushed.button-right:before{-webkit-box-shadow:inset -.35em 0 0 rgba(0,0,0,.2);-moz-box-shadow:inset -.35em 0 0 rgba(0,0,0,.2);-o-box-shadow:inset -.35em 0 0 rgba(0,0,0,.2);box-shadow:inset -.35em 0 0 rgba(0,0,0,.2)}.smart-forms .pushed:active.button-right:before{-webkit-box-shadow:inset -.2em 0 0 rgba(0,0,0,.2);-moz-box-shadow:inset -.2em 0 0 rgba(0,0,0,.2);-o-box-shadow:inset -.2em 0 0 rgba(0,0,0,.2);box-shadow:inset -.2em 0 0 rgba(0,0,0,.2)}.smart-forms .form-footer .button{margin-right:10px;margin-bottom:5px}.smart-forms .align-right .button{margin-right:0;margin-left:10px}.smart-forms .twitter,.smart-forms .twitter:hover,.smart-forms .twitter:focus,.smart-forms .facebook,.smart-forms .facebook:hover,.smart-forms .facebook:focus,.smart-forms .googleplus,.smart-forms .googleplus:hover,.smart-forms .googleplus:focus{color:#fff;text-shadow:0 1px rgba(0,0,0,.08)}.smart-forms .facebook{background-color:#3b5998}.smart-forms .twitter{background-color:#00acee}.smart-forms .googleplus{background-color:#dd4b39}.smart-forms .facebook:hover,.smart-forms .facebook:focus{background-color:#25385F}.smart-forms .twitter:hover,.smart-forms .twitter:focus{background-color:#00749F}.smart-forms .googleplus:hover,.smart-forms .googleplus:focus{background-color:#8D2418}.smart-forms .span-left{padding-left:52px;text-align:left}.smart-forms .btn-social{position:relative;margin-bottom:5px}.smart-forms .btn-social i{font-size:22px;position:relative;top:2px}.smart-forms .btn-social span{-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px;display:inline-block;text-align:center;position:absolute;width:42px;left:0}.smart-forms .twitter span{background-color:#009AD5}.smart-forms .facebook span{background-color:#31497D}.smart-forms .googleplus span{background-color:#C03121}.smart-forms .rating{position:relative}.smart-forms .rating.block{display:block;margin:10px 0}.smart-forms .rating label{color:#B5C1C7}.smart-forms .rating label i{font-size:17px;text-align:center;color:inherit}.smart-forms .rating label span{font:22px/22px Times,Serif}.smart-forms .rating-star{margin-left:4px}.smart-forms .rating-input{position:absolute;left:-9999px;top:auto}.smart-forms .rating:hover .rating-star:hover,.smart-forms .rating:hover .rating-star:hover~.rating-star,.smart-forms .rating-input:checked~.rating-star{color:#1abc9c}.smart-forms .rating-star,.smart-forms .rating:hover .rating-star{width:18px;float:right;display:block;cursor:pointer;color:#B5C1C7}.smart-forms .rating:before,.smart-forms .rating:after{display:table;content:"";line-height:0}.smart-forms .rating:after{clear:both}.smart-forms .rating .lbl-text{font-size:14px;display:inline-block;float:left}.smart-forms .rating-wrapper{position:relative;display:inline-block;margin-top:0;float:right}.smart-forms .rating label span{font-family:Arial,Helvetica,sans-serif;text-shadow:0 1px rgba(255,255,255,0);-webkit-transition:margin 0.6s,opacity 0.6s;-moz-transition:margin 0.6s,opacity 0.6s;-ms-transition:margin 0.6s,opacity 0.6s;-o-transition:margin 0.6s,opacity 0.6s;transition:margin 0.6s,opacity 0.6s;-webkit-border-radius:3px;-moz-border-radius:3px;border-radius:3px;white-space:nowrap;position:absolute;padding:5px 10px;font-weight:700;background:#34495E;font-size:11px;margin-left:-5px;margin-bottom:15px;display:block;left:-9999px;color:#fff;opacity:0;z-index:10}.smart-forms .rating label:hover span{bottom:100%;opacity:1;left:auto;margin-bottom:5px}.smart-forms .rating label span:before{content:'';position:absolute;border-top:4px solid #34495E;border-right:4px solid transparent;border-left:4px solid transparent;left:8px;top:100%}.smart-forms .smart-widget,.smart-forms .append-picker-icon,.smart-forms .prepend-picker-icon{position:relative;display:block}.smart-forms .smart-widget .field input,.smart-forms .append-picker-icon input,.smart-forms .prepend-picker-icon input{width:100%}.smart-forms .append-picker-icon button,.smart-forms .prepend-picker-icon button,.smart-forms .smart-widget .button{-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;position:absolute;height:42px;top:0}.smart-forms .append-picker-icon button,.smart-forms .prepend-picker-icon .gui-input,.smart-forms .sm-left .field input,.smart-forms .sm-right .button{-webkit-border-top-left-radius:0;-webkit-border-bottom-left-radius:0;-moz-border-top-left-radius:0;-moz-border-bottom-left-radius:0;-o-border-top-left-radius:0;-o-border-bottom-left-radius:0;border-top-left-radius:0;border-bottom-left-radius:0}.smart-forms .prepend-picker-icon button,.smart-forms .append-picker-icon .gui-input,.smart-forms .sm-right .field input,.smart-forms .sm-left .button{-webkit-border-top-right-radius:0;-webkit-border-bottom-right-radius:0;-moz-border-top-right-radius:0;-moz-border-bottom-right-radius:0;-o-border-top-right-radius:0;-o-border-bottom-right-radius:0;border-top-right-radius:0;border-bottom-right-radius:0}.smart-forms .prepend-picker-icon button,.smart-forms .sm-left .button{left:0}.smart-forms .append-picker-icon button,.smart-forms .sm-right .button{right:0}.smart-forms .sml-50,.smart-forms .prepend-picker-icon{padding-left:50px}.smart-forms .sml-50 .button,.smart-forms .prepend-picker-icon button{width:50px}.smart-forms .sml-80{padding-left:80px}.smart-forms .sml-80 .button{width:80px}.smart-forms .sml-120{padding-left:120px}.smart-forms .sml-120 .button{width:120px}.smart-forms .smr-50,.smart-forms .append-picker-icon{padding-right:50px}.smart-forms .smr-50 .button,.smart-forms .append-picker-icon button{width:50px}.smart-forms .smr-80{padding-right:80px}.smart-forms .smr-80 .button{width:80px}.smart-forms .smr-120{padding-right:120px}.smart-forms .smr-120 .button{width:120px}.smart-forms .append-picker-icon button,.smart-forms .prepend-picker-icon button{background:#bdc3c7;text-shadow:0 1px rgba(255,255,255,.2);text-align:center;cursor:pointer;color:#243140;border:0}.smart-forms .append-picker-icon button:hover,.smart-forms .prepend-picker-icon button:hover{color:#243140;background:#cacfd2}.smart-forms .append-picker-icon button:active,.smart-forms .prepend-picker-icon button:active{color:#1d2938;background:#a1a6a9}.smart-forms .append-icon,.smart-forms .prepend-icon{display:inline-block;vertical-align:top;position:relative;width:100%}.smart-forms .prepend-icon .custom-combobox-input{padding-left:42px}.smart-forms .append-icon .field-icon,.smart-forms .prepend-icon .field-icon{top:0;width:42px;height:42px;color:inherit;line-height:42px;position:absolute;text-align:center;-webkit-transition:all 0.5s ease-out;-moz-transition:all 0.5s ease-out;-ms-transition:all 0.5s ease-out;-o-transition:all 0.5s ease-out;transition:all 0.5s ease-out;pointer-events:none;z-index:99}.smart-forms .append-icon .field-icon i,.smart-forms .prepend-icon .field-icon i{position:relative;font-size:14px}.smart-forms .prepend-icon .field-icon{left:0}.smart-forms .append-icon .field-icon{right:0}.smart-forms .prepend-icon>input,.smart-forms .prepend-icon>textarea,.smart-forms .prepend-icon>select{padding-left:36px}.smart-forms .append-icon>input,.smart-forms .append-icon>textarea{padding-right:36px;padding-left:10px}.smart-forms .append-icon>textarea{padding-right:36px}.smart-forms .tooltip{position:absolute;z-index:-1;opacity:0;color:#fff;width:184px;left:-9999px;top:auto;font-size:11px;font-weight:400;background:#34495E;-webkit-transition:margin 0.6s,opacity 0.6s;-moz-transition:margin 0.6s,opacity 0.6s;-ms-transition:margin 0.6s,opacity 0.6s;-o-transition:margin 0.6s,opacity 0.6s;transition:margin 0.6s,opacity 0.6s}.smart-forms .tooltip>em{padding:12px;font-style:normal;display:block;position:static}.smart-forms .tooltip:after{content:'';position:absolute}.smart-forms .option:hover .tooltip,.smart-forms .gui-input:focus + .tooltip,.smart-forms .gui-textarea:focus + .tooltip,.smart-forms .select>select:focus~.tooltip{opacity:1;z-index:999}.smart-forms .tip-left{top:1px;margin-right:-20px}.smart-forms .tip-left:after{top:12px;left:100%;border-left:8px solid #34495E;border-top:8px solid transparent;border-bottom:8px solid transparent}.smart-forms .gui-input:focus + .tip-left,.smart-forms .gui-textarea:focus + .tip-left,.smart-forms .select>select:focus~.tip-left{margin-right:5px;right:100%;left:auto}.smart-forms .tip-right{top:1px;margin-left:-20px}.smart-forms .tip-right:after{top:12px;right:100%;border-right:8px solid #34495E;border-top:8px solid transparent;border-bottom:8px solid transparent}.smart-forms .gui-input:focus + .tip-right,.smart-forms .gui-textarea:focus + .tip-right,.smart-forms .select>select:focus~.tip-right{left:100%;margin-left:5px}.smart-forms .tip-right-top{bottom:100%;margin-bottom:-20px}.smart-forms .tip-right-top:after{top:100%;right:12px;border-top:8px solid #34495E;border-right:8px solid transparent;border-left:8px solid transparent}.smart-forms .gui-input:focus + .tip-right-top,.smart-forms .gui-textarea:focus + .tip-right-top,.smart-forms .select>select:focus~.tip-right-top{right:0;left:auto;margin-bottom:10px}.smart-forms .option .tooltip,.smart-forms .tip-left-top{bottom:100%;margin-bottom:-20px}.smart-forms .option .tooltip:after,.smart-forms .tip-left-top:after{top:100%;left:12px;border-top:8px solid #34495E;border-right:8px solid transparent;border-left:8px solid transparent}.smart-forms .option:hover .tooltip,.smart-forms .gui-input:focus + .tip-left-top,.smart-forms .gui-textarea:focus + .tip-left-top,.smart-forms .select>select:focus~.tip-left-top{left:0;right:auto;margin-bottom:10px}.smart-forms .option:hover .tooltip{left:-10px}.smart-forms .tip-right-bottom{top:100%;margin-top:-20px}.smart-forms .tip-right-bottom:after{right:12px;bottom:100%;border-bottom:8px solid #34495E;border-right:8px solid transparent;border-left:8px solid transparent}.smart-forms .gui-input:focus + .tip-right-bottom,.smart-forms .gui-textarea:focus + .tip-right-bottom{margin-top:10px;left:auto;right:0}.smart-forms .tip-left-bottom{top:100%;margin-top:-20px}.smart-forms .tip-left-bottom:after{left:12px;bottom:100%;border-bottom:8px solid #34495E;border-right:8px solid transparent;border-left:8px solid transparent}.smart-forms .gui-input:focus + .tip-left-bottom,.smart-forms .gui-textarea:focus + .tip-left-bottom{margin-top:10px;right:auto;left:0}.smart-forms .smart-list{list-style:none;margin:0;padding:0}.smart-forms .smart-list li{margin-bottom:20px}.smart-forms .form-msg{display:none}.smart-forms .notification{color:#444;padding:15px;position:relative}.smart-forms .notification p{margin:0;padding:0 15px;padding-left:5px;line-height:normal}.smart-forms .notification .close-btn{margin-top:-7px;padding:inherit;position:absolute;text-decoration:none;font:bold 20px/20px Arial,sans-serif;opacity:.65;color:inherit;display:block;right:1px;top:14%}.smart-forms .notification .close-btn:hover{opacity:1}.smart-forms .alert-info{color:#163161;background-color:#cfe6fc}.smart-forms .alert-success{color:#363;background-color:#d2f7ad}.smart-forms .alert-warning{color:#C60;background-color:#fae7a2}.smart-forms .alert-error{color:#900;background-color:#FBDBCF}.smart-forms .notification ul{margin-left:1.3em;list-style-position:inside;margin-top:10px}.smart-forms .state-error .gui-input,.smart-forms .state-error .gui-textarea,.smart-forms .state-error.select>select,.smart-forms .state-error.select-multiple>select,.smart-forms .state-error input:hover + .checkbox,.smart-forms .state-error input:hover + .radio,.smart-forms .state-error input:focus + .checkbox,.smart-forms .state-error input:focus + .radio,.smart-forms .state-error .checkbox,.smart-forms .state-error .radio{background:#FEEFE9;border-color:#E46B66}.smart-forms .state-error .gui-input~.field-icon i,.smart-forms .state-error .gui-textarea~.field-icon i{color:#e74c3c}.smart-forms .state-error.select .arrow{color:#e74c3c}.smart-forms .state-error.select:before{border-left:1px solid #E46B66}.smart-forms .state-error .gui-input~.input-hint,.smart-forms .state-error.file .gui-file:hover + .gui-input,.smart-forms .state-error .gui-textarea~.input-hint{border-color:#E46B66}.smart-forms .state-error + em{display:block!important;margin-top:6px;padding:0 3px;font-family:Arial,Helvetica,sans-serif;font-style:normal;line-height:normal;color:#C00;font-size:.85em}.smart-forms .state-success .gui-input,.smart-forms .state-success .gui-textarea,.smart-forms .state-success.select>select,.smart-forms .state-success.select-multiple>select,.smart-forms .state-success input:hover + .checkbox,.smart-forms .state-success input:hover + .radio,.smart-forms .state-success input:focus + .checkbox,.smart-forms .state-success input:focus + .radio,.smart-forms .state-success .checkbox,.smart-forms .state-success .radio{background:#EAFCD8;border-color:#2ecc71}.smart-forms .state-success .gui-input~.field-icon i,.smart-forms .state-success .gui-textarea~.field-icon i{color:#2ecc71}.smart-forms .state-success.select .arrow{color:#2ecc71}.smart-forms .state-success.select:before{border-left:1px solid #2ecc71}.smart-forms .state-success .gui-input~.input-hint,.smart-forms .state-success.file .gui-file:hover + .gui-input,.smart-forms .state-success .gui-textarea~.input-hint{border-color:#2ecc71}.smart-forms .button[disabled],.smart-forms .state-disabled .button,.smart-forms input[disabled] + .radio,.smart-forms input[disabled] + .checkbox,.smart-forms .switch>input[disabled] + label{cursor:default;opacity:.5}.smart-forms .gui-input[disabled],.smart-forms .gui-textarea[disabled],.smart-forms .select>select[disabled],.smart-forms .select-multiple select[disabled],.smart-forms .gui-input[disabled]~.input-hint,.smart-forms .file .gui-file[disabled] + .gui-input,.smart-forms .file .gui-file[disabled]:hover + .gui-input,.smart-forms .gui-textarea[disabled]~.input-hint{background-color:#f4f6f6;border-color:#d5dbdb!important;cursor:default;color:#d5dbdb;opacity:.7}.smart-forms input[disabled]~.field-icon i,.smart-forms textarea[disabled]~.field-icon i,.smart-forms .select>select[disabled] + .arrow{opacity:.4}.ui-helper-hidden{display:none}.ui-helper-hidden-accessible{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;width:1px}.ui-helper-reset{margin:0;padding:0;border:0;outline:0;line-height:1.3;text-decoration:none;font-size:100%;list-style:none}.ui-helper-clearfix:before,.ui-helper-clearfix:after{content:"";display:table;border-collapse:collapse}.ui-helper-clearfix:after{clear:both}.ui-helper-clearfix{min-height:0}.ui-helper-zfix{width:100%;height:100%;top:0;left:0;position:absolute;opacity:0;filter:Alpha(Opacity=0)}.ui-front{z-index:100}.ui-datepicker{width:18em;margin-top:14px;display:none;background:#fff;position:relative;font:14px/1.55 "Roboto",Arial,Helvetica,sans-serif;-webkit-box-shadow:0 0 4px rgba(0,0,0,.3);-moz-box-shadow:0 0 4px rgba(0,0,0,.3);-o-box-shadow:0 0 4px rgba(0,0,0,.3);box-shadow:0 0 4px rgba(0,0,0,.3);border:5px solid #1ABC9C;z-index:9999!important;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;text-align:center;color:#666}.ui-datepicker:before{content:"";bottom:auto;border:solid;border-width:16px 16px 16px;border-color:transparent transparent #1ABC9C transparent;border-color:rgba(255,255,255,0) rgba(255,255,255,0) #1ABC9C rgba(255,255,255,0);position:absolute;margin-left:-10px;display:block;top:-32px;left:10%;height:0;width:0}.ui-datepicker a{color:#404040;text-align:center}.ui-datepicker .ui-state-disabled span{color:#D9DDE5}.ui-timepicker-div .ui-widget-header,.ui-datepicker .ui-datepicker-header{position:relative;background:#1ABC9C;line-height:27px;font-size:15px;padding:10px}.ui-datepicker .ui-datepicker-prev,.ui-datepicker .ui-datepicker-next{width:34px;height:34px;display:block;font-size:14px;position:absolute;text-decoration:none;cursor:pointer;color:#fff;top:19.5%}.ui-datepicker .ui-datepicker-prev{left:2px}.ui-datepicker .ui-datepicker-next{right:2px}.ui-datepicker .ui-datepicker-title{margin:0 2.3em;line-height:1.8em;text-align:center;color:#fff}.ui-datepicker .ui-datepicker-title select{font-size:1em;margin:1px 0}.ui-datepicker select.ui-datepicker-month-year{width:100%}.ui-datepicker select.ui-datepicker-month,.ui-datepicker select.ui-datepicker-year{width:49%}.ui-datepicker table{width:100%;font-size:.9em;margin:0 0 .4em;border-collapse:collapse}.ui-datepicker th{padding:.5em .3em;text-align:center;font-weight:700;border:0}.ui-datepicker td{border:0;padding:2px 5px}.ui-datepicker td span,.ui-datepicker td a{padding:.25em;display:block;text-align:center;text-decoration:none;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}.ui-datepicker td span:hover,.ui-datepicker td a:hover{background:#D7DCDE}.ui-datepicker .ui-state-disabled span:hover{background:none}.ui-datepicker-today a,.ui-datepicker-today a:hover,.ui-datepicker .ui-state-highlight{background:#FFFA90!important;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;font-weight:700;color:#243140}.ui-monthpicker .ui-datepicker-today a,.ui-monthpicker .ui-datepicker-today a:hover,.ui-datepicker .ui-datepicker-current-day a{font-weight:700;background:#1ABC9C!important;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;color:#fff}.cal-widget .ui-datepicker{width:100%;margin-top:0}.cal-widget .ui-datepicker:before{display:none}.ui-datepicker.ui-datepicker-multi{width:auto}.ui-datepicker-multi .ui-datepicker-group{float:left}.ui-datepicker-multi .ui-datepicker-group table{width:95%;margin:0 auto .4em}.ui-datepicker-multi-2 .ui-datepicker-group{width:50%}.ui-datepicker-multi-3 .ui-datepicker-group{width:33.333%}.ui-datepicker-multi-4 .ui-datepicker-group{width:25%}.ui-datepicker-multi .ui-datepicker-group-last .ui-datepicker-header,.ui-datepicker-multi .ui-datepicker-group-middle .ui-datepicker-header{border-left-width:0}.ui-datepicker-multi .ui-datepicker-buttonpane{clear:left}.ui-datepicker-row-break{clear:both;width:100%;font-size:0}.ui-datepicker-buttonpane{border-top:1px solid #D9DDE5;padding:10px}.ui-datepicker-buttonpane button{padding:8px 12px;margin-right:.2em;position:relative;line-height:normal;display:inline-block;-webkit-user-drag:none;text-shadow:0 1px rgba(255,255,255,.2);-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;vertical-align:middle;background:#bdc3c7;text-align:center;overflow:visible;cursor:pointer;color:#243140;border:0}.ui-datepicker-buttonpane button:hover{color:#243140;background:#cacfd2}.ui-datepicker-buttonpane button:active{color:#1d2938;background:#a1a6a9}.ui-monthpicker .ui-datepicker-header{margin-bottom:3px}.smart-forms .slider-wrapper,.smart-forms .sliderv-wrapper{background:#E2E8F1;position:relative;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}.smart-forms .ui-slider{position:relative;text-align:left}.smart-forms .ui-slider .ui-slider-handle{position:absolute;z-index:2;width:1.5em;height:1.5em;cursor:default;background:#fff;text-decoration:none;border:3px solid #1ABC9C;-webkit-border-radius:20px;-moz-border-radius:20px;-o-border-radius:20px;border-radius:20px;-ms-touch-action:none;touch-action:none;margin-top:-3px;outline:none}.smart-forms .ui-slider .ui-slider-handle:before{content:'';width:8px;height:8px;position:absolute;background-color:#1ABC9C;-webkit-border-radius:10px;-moz-border-radius:10px;-o-border-radius:10px;border-radius:10px;z-index:2;left:4px;top:4px}.smart-forms .ui-slider .ui-slider-range{position:absolute;z-index:1;font-size:.7em;display:block;border:0;background-position:0 0;background-color:#1ABC9C;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}.smart-forms .ui-slider.ui-state-disabled .ui-slider-handle,.smart-forms .ui-slider.ui-state-disabled .ui-slider-range{filter:inherit}.smart-forms .ui-slider-horizontal{height:.5em}.smart-forms .ui-slider-horizontal .ui-slider-handle{top:-.3em;margin-left:-.6em}.smart-forms .ui-slider-horizontal .ui-slider-range{top:0;height:100%}.smart-forms .ui-slider-horizontal .ui-slider-range-min{left:0}.smart-forms .ui-slider-horizontal .ui-slider-range-max{right:0}.smart-forms .ui-slider-vertical,.smart-forms .sliderv-wrapper{width:.5em;height:100px}.smart-forms .ui-slider-vertical .ui-slider-handle{left:-.45em;margin-left:0;margin-bottom:-.6em}.smart-forms .ui-slider-vertical .ui-slider-range{left:0;width:100%}.smart-forms .ui-slider-vertical .ui-slider-range-min{bottom:0}.smart-forms .ui-slider-vertical .ui-slider-range-max{top:0}.smart-forms .slider-input{color:#f6931f!important;border:0;background:none}.smart-forms .slider-group .sliderv-wrapper{height:150px;float:left;margin:15px 15px}.smart-forms .ui-slider .ui-state-active{cursor:-webkit-grabbing;cursor:-moz-grabbing;cursor:grabbing}.smart-forms .slider-tip{display:block;position:absolute;text-align:center;font:10pt Tahoma,Arial,sans-serif;background:#34495E;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px;padding:10px;color:#fff}.smart-forms .slider-wrapper .slider-tip{top:-50px;left:-15px}.smart-forms .slider-wrapper .slider-tip:after{content:'';position:absolute;top:98%;left:35%;border-top:8px solid #34495E;border-right:8px solid transparent;border-left:8px solid transparent}.smart-forms .sliderv-wrapper .slider-tip{left:30px;top:-12px}.smart-forms .sliderv-wrapper .slider-tip:after{content:'';position:absolute;top:30%;right:98%;border-right:8px solid #34495E;border-top:8px solid transparent;border-bottom:8px solid transparent}.smart-forms .yellow-slider .ui-slider .ui-slider-handle{border-color:#ed9c28}.smart-forms .yellow-slider .ui-slider .ui-slider-handle:before,.smart-forms .yellow-slider .ui-slider .ui-slider-range{background-color:#ed9c28}.smart-forms .red-slider .ui-slider .ui-slider-handle{border-color:#e74c3c}.smart-forms .red-slider .ui-slider .ui-slider-handle:before,.smart-forms .red-slider .ui-slider .ui-slider-range{background-color:#e74c3c}.smart-forms .purple-slider .ui-slider .ui-slider-handle{border-color:#9B59B6}.smart-forms .purple-slider .ui-slider .ui-slider-handle:before,.smart-forms .purple-slider .ui-slider .ui-slider-range{background-color:#9B59B6}.smart-forms .blue-slider .ui-slider .ui-slider-handle{border-color:#3498db}.smart-forms .blue-slider .ui-slider .ui-slider-handle:before,.smart-forms .blue-slider .ui-slider .ui-slider-range{background-color:#3498db}.smart-forms .black-slider .ui-slider .ui-slider-handle{border-color:#34495e}.smart-forms .black-slider .ui-slider .ui-slider-handle:before,.smart-forms .black-slider .ui-slider .ui-slider-range{background-color:#34495e}.smart-forms .green-slider .ui-slider .ui-slider-handle{border-color:#2ecc71}.smart-forms .green-slider .ui-slider .ui-slider-handle:before,.smart-forms .green-slider .ui-slider .ui-slider-range{background-color:#2ecc71}.ui-timepicker-div .ui-widget-header{position:relative;line-height:27px;font-size:15px;padding:10px}.ui-timepicker-div dl{text-align:left;border:1px solid #D9DDE5;border-width:1px 0 0 0;padding:15px 10px;padding-bottom:15px;margin:0}.ui-timepicker-div dl dt{float:left;clear:left;padding:0 0 0 5px}.ui-timepicker-div dl dd{margin:0 10px 15px 40%}.ui-timepicker-div td{font-size:90%}.ui-tpicker-grid-label{background:none;border:none;margin:0;padding:0}.ui-timepicker-div .ui_tpicker_unit_hide{display:none}.ui-timepicker-rtl{direction:rtl}.ui-timepicker-rtl dl{text-align:right;padding:0 5px 0 0}.ui-timepicker-rtl dl dt{float:right;clear:right}.ui-timepicker-rtl dl dd{margin:0 40% 10px 10px;background:#E2E8F1;position:relative;top:6px}.ui-timepicker-div dl .ui_tpicker_hour,.ui-timepicker-div dl .ui_tpicker_minute,.ui-timepicker-div dl .ui_tpicker_second,.ui-timepicker-div dl .ui_tpicker_millisec{background:#E2E8F1;position:relative;top:5px}.ui_tpicker_time_input{background:none;border:0;display:inline-block}.ui-timepicker-div.ui-timepicker-oneLine{padding-right:2px}.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time,.ui-timepicker-div.ui-timepicker-oneLine dt{display:none}.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_time_label{display:block;padding-top:2px}.ui-timepicker-div.ui-timepicker-oneLine dl{text-align:right}.ui-timepicker-div.ui-timepicker-oneLine dl dd,.ui-timepicker-div.ui-timepicker-oneLine dl dd>div{display:inline-block;margin:0}.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_minute:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_second:before{content:':';display:inline-block}.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_millisec:before,.ui-timepicker-div.ui-timepicker-oneLine dl dd.ui_tpicker_microsec:before{content:'.';display:inline-block}.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide,.ui-timepicker-div.ui-timepicker-oneLine .ui_tpicker_unit_hide:before{display:none}.ui-autocomplete{position:absolute;top:0;left:0;cursor:default;z-index:10000000;list-style:none;padding:0;margin:0;display:block;outline:none;font-family:"Roboto",Arial,Helvetica,sans-serif;font-size:14px;border:1px solid #bbb;border-top:0;background:#fff;max-height:100px;overflow-x:hidden;overflow-y:auto}.ui-autocomplete .ui-menu{position:absolute}.ui-autocomplete .ui-menu-item{position:relative;margin:0;padding:8px 10px;cursor:pointer;min-height:0;list-style-image:url(data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7);background:#F2F4FA;border-bottom:1px solid #DCE1EE;-webkit-box-shadow:inset 0 1px #fff,inset 0 0 0 1px rgba(255,255,255,.5);-moz-box-shadow:inset 0 1px #fff,inset 0 0 0 1px rgba(255,255,255,.5);-o-box-shadow:inset 0 1px #fff,inset 0 0 0 1px rgba(255,255,255,.5);box-shadow:inset 0 1px #fff,inset 0 0 0 1px rgba(255,255,255,.5)}.ui-autocomplete .ui-menu-divider{margin:5px 0;height:0;font-size:0;line-height:0;border-width:1px 0 0 0;border-color:#ddd}.ui-autocomplete .ui-menu-item:hover{background:#DCE1EE}.custom-combobox{position:relative;padding-right:46px;display:block}.custom-combobox-toggle{position:absolute;top:0;bottom:0;right:0;margin-left:-1px;padding:0;z-index:10;width:46px;line-height:40px;height:100%;text-align:center;background:#F2F4FA;border:2px solid #BDC3C7;-webkit-border-radius:0 3px 3px 0;-moz-border-radius:0 3px 3px 0;-o-border-radius:0 3px 3px 0;border-radius:0 3px 3px 0;cursor:pointer;color:#ADB4B8;border-left:0}.custom-combobox-input.gui-input{margin:0;padding:5px 10px;-webkit-border-radius:3px 0 0 3px;-moz-border-radius:3px 0 0 3px;-o-border-radius:3px 0 0 3px;border-radius:3px 0 0 3px}.smart-forms .progress-section{display:none}.smart-forms .progress-bar{position:relative;background:#EDF0F8;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}.smart-forms .progress-bar .percent{position:absolute;display:inline-block;top:-3px;right:-24px;font-size:9px;color:#93A2AA}.smart-forms .progress-bar>.bar{width:60%;height:7px;display:block;background-size:16px 16px;background-color:#bdc3c7;-webkit-border-radius:3px;-moz-border-radius:3px;-o-border-radius:3px;border-radius:3px}.smart-forms .bar-primary>.bar{background-color:#1abc9c}.smart-forms .bar-blue>.bar{background-color:#3498db}.smart-forms .bar-black>.bar{background-color:#34495e}.smart-forms .bar-green>.bar{background-color:#2ecc71}.smart-forms .bar-purple>.bar{background-color:#9B59B6}.smart-forms .bar-red>.bar{background-color:#e74c3c}.smart-forms .bar-yellow>.bar{background-color:#ed9c28}.smart-forms .ui-slider .ui-slider-range,.smart-forms .progress>button[type="submit"]:hover,.smart-forms .progress>button[type="submit"],.smart-forms .progress-bar>.bar{background-size:16px 16px;background-image:-webkit-linear-gradient(top left,transparent,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3));background-image:-moz-linear-gradient(top left,transparent,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3));background-image:-o-linear-gradient(top left,transparent,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3));background-image:linear-gradient(to bottom right,transparent,transparent 25%,rgba(255,255,255,.3) 25%,rgba(255,255,255,.3) 50%,transparent 50%,transparent 75%,rgba(255,255,255,.3) 75%,rgba(255,255,255,.3))}.smart-forms .progress>button[type="submit"],.smart-forms .progress>button[type="submit"]:hover,.smart-forms .progress-animated>.bar{-webkit-animation:sfprogress .6s linear infinite;-moz-animation:sfprogress .6s linear infinite;-o-animation:sfprogress .6s linear infinite;animation:sfprogress .6s linear infinite}.smart-forms .progress>button[type="submit"]:hover{cursor:wait}@-webkit-keyframes sfprogress{from{background-position:0 0}to{background-position:-16px 0}}@-moz-keyframes sfprogress{from{background-position:0 0}to{background-position:-16px 0}}@-o-keyframes sfprogress{from{background-position:0 0}to{background-position:-16px 0}}@keyframes sfprogress{from{background-position:0 0}to{background-position:-16px 0}}.clone-widget{padding-right:100px;position:relative}.clone-widget .button{position:absolute;right:0;top:0}.clone-widget .clone{right:50px}.smart-forms .map-container{padding:10px;border:2px solid #BDC3C7;border-radius:3px}.smart-forms .map-area,.smart-forms #map_canvas{width:100%;height:400px;overflow:hidden}.smart-forms .block{display:block}.smart-forms .frm-row{margin:0 -10px}.smart-forms .slider-group:before,.smart-forms .slider-group:after,.smart-forms .frm-row:before,.smart-forms .frm-row:after{display:table;content:"";line-height:0}.smart-forms .slider-group:after,.smart-forms .frm-row:after{clear:both}.smart-forms .frm-row .colm{min-height:1px;padding-left:10px;padding-right:10px;position:relative;float:left}.smart-forms .frm-row .colm1{width:8.33%}.smart-forms .frm-row .colm2{width:16.66%}.smart-forms .frm-row .colm3{width:25%}.smart-forms .frm-row .colm4{width:33.33%}.smart-forms .frm-row .colm5{width:41.66%}.smart-forms .frm-row .colm6{width:50%}.smart-forms .frm-row .colm7{width:58.33%}.smart-forms .frm-row .colm8{width:66.66%}.smart-forms .frm-row .colm9{width:75%}.smart-forms .frm-row .colm10{width:83.33%}.smart-forms .frm-row .colm11{width:91.66%}.smart-forms .frm-row .colm12{width:100%}.smart-forms .frm-row .colm1-5{width:20%}.smart-forms .frm-row .colm1-8{width:12.5%}.smart-forms .spacer{border-top:1px solid #D9DDE5;display:block;height:0}.smart-forms .spacer-t10{margin-top:10px}.smart-forms .spacer-b10{margin-bottom:10px}.smart-forms .spacer-t15{margin-top:15p}.smart-forms .spacer-b15{margin-bottom:15px}.smart-forms .spacer-t20{margin-top:20px}.smart-forms .spacer-b20{margin-bottom:20px}.smart-forms .spacer-t25{margin-top:25px}.smart-forms .spacer-b25{margin-bottom:25px}.smart-forms .spacer-t30{margin-top:30px}.smart-forms .spacer-b30{margin-bottom:30px}.smart-forms .spacer-t40{margin-top:40px}.smart-forms .spacer-b40{margin-bottom:40px}.smart-forms .frm-row .pad-l10{padding-left:10px}.smart-forms .frm-row .pad-r10{padding-right:10px}.smart-forms .frm-row .pad-l20{padding-left:20px}.smart-forms .frm-row .pad-r20{padding-right:20px}.smart-forms .frm-row .pad-l30{padding-left:30px}.smart-forms .frm-row .pad-r30{padding-right:30px}.smart-forms .frm-row .pad-l40{padding-left:40px}.smart-forms .frm-row .pad-r40{padding-right:40px}.smart-forms .bdl{border-left:1px solid #D9DDE5}.smart-forms .bdr{border-right:1px solid #D9DDE5}.smart-forms .fine-grey{color:#919DA8}.smart-forms .small-text{font-size:11px;font-style:normal}.smart-forms .text-align{height:42px;line-height:42px}.smart-forms .align-right{text-align:right}.smart-forms .align-center{text-align:center}.smart-forms .price-box{padding:30px;text-align:center;position:relative;border:1px solid #D0D6DF;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.05);-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.05);-o-box-shadow:0 2px 0 0 rgba(0,0,0,.05);box-shadow:0 2px 0 0 rgba(0,0,0,.05)}.smart-forms .price-box p{line-height:1.5em;font-weight:300;font-size:16px;color:#526066;margin-bottom:0}.smart-forms .price-box h5{text-transform:uppercase;font-weight:300;margin:0;font-size:15px;color:#BACDD6;letter-spacing:2px}.smart-forms .price-box h4{font-size:60px;font-weight:400;margin:0;color:#547698}.smart-forms .selected-box h4{color:#1abc9c}.smart-forms .price-box h4 sup{position:relative;font-size:30px;vertical-align:top;top:15px}.smart-forms .price-box h4 .per-month{font-size:14px}.smart-forms .expand{height:50px;line-height:50px!important}.smart-forms .ribbon,.smart-forms .ribbon-large{width:75px;height:78px;overflow:hidden;position:absolute;right:-2px;top:-2px;z-index:1}.smart-forms .ribbon-inner{font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;-webkit-box-shadow:0 2px 0 0 rgba(0,0,0,.15);-moz-box-shadow:0 2px 0 0 rgba(0,0,0,.15);-o-box-shadow:0 2px 0 0 rgba(0,0,0,.15);box-shadow:0 2px 0 0 rgba(0,0,0,.15);-webkit-transform:translate3d(0,0,0);-webkit-backface-visibility:hidden;-webkit-perspective:1000;-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);background:#1abc9c;letter-spacing:4px;text-align:center;position:relative;font-weight:700;font-size:14px;padding:7px 0;width:100px;color:#fff;z-index:1;left:3px;top:6px}.smart-forms .ribbon-inner:before,.smart-forms .ribbon-inner:after{content:"";border-top:3px solid #16a085;border-left:3px solid transparent;border-right:3px solid transparent;position:absolute;bottom:-3px}.smart-forms .ribbon-inner:before{left:0}.smart-forms .ribbon-inner:after{right:0}.smart-forms .ribbon-large{width:115px;height:118px}.smart-forms .ribbon-large .ribbon-inner{width:160px;left:-8px;top:28px}.smart-forms .sfcode{padding-left:24px}.smart-forms .captcode{padding:0;position:relative}.smart-forms .captcode:hover{background:#BDC3C7!important}.smart-forms .captcode img{position:relative;-webkit-border-radius:2px 0 0 2px;-moz-border-radius:2px 0 0 2px;-o-border-radius:2px 0 0 2px;border-radius:2px 0 0 2px;top:2px;left:1px}.smart-forms .refresh-captcha{position:absolute;background:#1abc9c;border:3px solid #16a085;-webkit-border-radius:30px;-moz-border-radius:30px;-o-border-radius:30px;border-radius:30px;right:-15px;height:32px;width:32px;top:4px}.smart-forms .refresh-captcha i{position:absolute;text-align:center;line-height:26px;font-size:17px;color:#fff;left:24%}.smart-forms .smart-hidden-elem{position:absolute;visibility:hidden;margin:0;padding:0}.smart-forms .refresh-black{background:#34495e;border-color:#2c3e50}.smart-forms .refresh-blue{background:#3498db;border-color:#2c81ba}.smart-forms .refresh-green{background:#2ecc71;border-color:#27ad60}.smart-forms .refresh-purple{background:#9B59B6;border-color:#8E44AD}.smart-forms .refresh-red{background:#e74c3c;border-color:#c44133}.smart-forms .refresh-yellow{background:#ed9c28;border-color:#d58512}@media screen and (-ms-high-contrast:active),(-ms-high-contrast:none){.smart-forms .checkbox:before{top:4px;left:3px}}@media screen and (-webkit-min-device-pixel-ratio:0){.smart-forms .option,.smart-forms .rating,.smart-forms .switch,.smart-forms .captcode{-webkit-animation:bugfix infinite 1s}@-webkit-keyframes bugfix{from{padding:0}to{padding:0}}.smart-forms .switch{margin-right:10px;margin-bottom:5px}.smart-forms .option{margin-right:15px}.smart-forms .switch-round>.switch-label:after{font:30px/20px Times,Serif}}@media (max-width:800px){.smart-forms .frm-row{margin:0}.smart-forms .frm-row .colm{width:100%;float:none;padding:0}.smart-forms .bdl{border-left:0}.smart-forms .bdr{border-right:0}.smart-forms .align-right{text-align:left}}
</style>
</head>
<body>
<h1 style="text-align:center;font-family: Arial;"><a href="http://estradawebgroup.com">Estrada Web Group</a><br> Ejemplo con jQuery de un TextBox Autocomplete</h1>
<div class="smart-wrap">
<div class="smart-forms smart-container wrap-3">
<div class="form-header header-primary">
<h4><i class="fa fa-pencil-square"></i> Autocomplete </h4>
</div><!-- end .form-header section -->
<form method="post" action="/" id="account2">
<div class="form-body">
<div class="section">
<label for="countryList" class="field-label">Basic </label>
<label class="field">
<input type="text" name="countryList" id="countryList" class="gui-input" placeholder="Enter Country">
</label>
</div><!-- end section -->
<div class="section">
<label for="multipleTags" class="field-label">Select Multiple Items</label>
<label class="field">
<input type="text" name="multipleTags" id="multipleTags" class="gui-input" placeholder="Select multiple items">
</label>
</div><!-- end section -->
</div><!-- end .form-body section -->
<div class="form-footer">
<button type="submit" class="button btn-primary"> Send Form </button>
</div><!-- end .form-footer section -->
</form>
</div><!-- end .smart-forms section -->
</div><!-- end .smart-wrap section -->
<div></div><!-- end section -->
</body>
</html>
Compartir:
Cargando...
Artículos recientes
-
-
Cómo agregar código JavaScript en una página HTML
20 junio 2022 -
¿Cómo agregar un elemento a un array en JavaScript?
23 agosto 2022 -
Las 3 mejores formas para concatenar cadenas de texto en JavaScript
09 noviembre 2022
