Прикрутил на сайт этот скрипт, все очень хорошо и красиво. НО.. Раскрывающийся список не выходит за границы родительского блока и появляется скролл(скрин) файл jquery.formstyler.css Код: .jq-checkbox { position: relative; width: 13px; height: 13px; border: 1px solid #C3C3C3; border-radius: 3px; background: #F6F6F6 url(data:image/gif;base64,R0lGODlhAQAMALMAAPHx8f7+/vv7+/j4+PX19fLy8vz8/Pn5+fb29vPz8/39/ff39wAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABAAwAAAQJMCgjzliIpAIiADs=) repeat-x; box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF; vertical-align: middle; cursor: pointer; } .jq-checkbox.checked span { display: block; width: 9px; height: 9px; margin: 2px 0 0 2px; border-radius: 2px; background: #666; box-shadow: inset 0 -3px 6px #AAA; } .jq-checkbox.focused { border: 1px solid #08C; } .jq-checkbox.disabled { opacity: 0.55; filter: alpha(opacity=55); } .jq-radio { width: 12px; height: 12px; border: 1px solid #C3C3C3; border-radius: 50%; background: #F6F6F6 url(data:image/gif;base64,R0lGODlhAQAMALMAAPHx8f7+/vv7+/j4+PX19fLy8vz8/Pn5+fb29vPz8/39/ff39wAAAAAAAAAAAAAAACH5BAAAAAAALAAAAAABAAwAAAQJMCgjzliIpAIiADs=) 0 -1px repeat-x; box-shadow: 0 1px 1px rgba(0,0,0,0.05), inset -1px -1px #FFF, inset 1px -1px #FFF; vertical-align: middle; cursor: pointer; } .jq-radio.checked span { display: block; width: 6px; height: 6px; overflow: hidden; margin: 3px 0 0 3px; border-radius: 50%; background: #666; } .jq-radio.focused { border: 1px solid #08C; } .jq-radio.disabled { opacity: 0.55; filter: alpha(opacity=55); } .jq-selectbox { vertical-align: middle; cursor: pointer; } .jq-selectbox__select { width: 160px; height: 30px; padding: 0 45px 0 10px; border: 1px solid #CCC; border-bottom-color: #B3B3B3; border-radius: 4px; background: #F5F5F5 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x; box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1); color: #333; text-shadow: 1px 1px #FFF; font: 14px/30px Arial, Tahoma, sans-serif; } .jq-selectbox__select:hover { background-color: #E6E6E6; background-position: 0 -10px; } .jq-selectbox__select:active { background: #F5F5F5; box-shadow: inset 1px 1px 3px #DDD; } .jq-selectbox.focused .jq-selectbox__select { border: 1px solid #5794BF; } .jq-selectbox.disabled .jq-selectbox__select { border-color: #CCC; background: #F5F5F5; box-shadow: none; color: #888; } .jq-selectbox__select-text { display: block; width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .jq-selectbox__trigger { position: absolute; top: 0; right: 0; width: 34px; height: 100%; border-left: 1px solid #CCC; } .jq-selectbox__trigger-arrow { position: absolute; top: 14px; right: 12px; width: 0; height: 0; overflow: hidden; border-top: 5px solid #000; border-right: 5px solid transparent; border-left: 5px solid transparent; opacity: 0.3; filter: alpha(opacity=30); } .jq-selectbox:hover .jq-selectbox__trigger-arrow { opacity: 1; filter: alpha(opacity=100); } .jq-selectbox.disabled .jq-selectbox__trigger-arrow { opacity: 0.3; filter: alpha(opacity=30); } .jq-selectbox__dropdown { top: 33px; width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; margin: 0; padding: 0; border: 1px solid #C6CBD0; border-radius: 4px; background: #FFF; box-shadow: 0 2px 10px rgba(0,0,0,0.2); font: 14px/18px Arial, Tahoma, sans-serif; } .jq-selectbox ul { margin: 0; padding: 0; } .jq-selectbox li { padding: 5px 10px 6px; color: #231F20; } .jq-selectbox li.selected { background: #A3ABB1; color: #FFF; } .jq-selectbox li:hover { background: #08C; color: #FFF; } .jq-selectbox li.disabled { color: #AAA; } .jq-selectbox li.disabled:hover { background: none; } .jq-selectbox li.optgroup { font-weight: bold; } .jq-selectbox li.optgroup:hover { background: none; color: #231F20; cursor: default; } .jq-selectbox li.option { padding-left: 25px; } .jq-select-multiple { padding: 1px; border: 1px solid #CCC; border-bottom-color: #B3B3B3; border-radius: 4px; box-shadow: inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,0.1); background: #FFF; color: #333; font: 14px/18px Arial, Tahoma, sans-serif; cursor: default; } .jq-select-multiple.focused { border: 1px solid #5794BF; } .jq-select-multiple.disabled { border-color: #CCC; background: #F5F5F5; box-shadow: none; color: #888; } .jq-select-multiple ul { margin: 0; padding: 0; } .jq-select-multiple li { padding: 3px 9px 4px; list-style: none; } .jq-select-multiple li:first-child { border-radius: 3px 3px 0 0; } .jq-select-multiple li:last-child { border-radius: 0 0 3px 3px; } .jq-select-multiple li.selected { background: #08C; color: #FFF; } .jq-select-multiple li.disabled { color: #AAA; } .jq-select-multiple.disabled li.selected, .jq-select-multiple li.selected.disabled { background: #CCC; color: #FFF; } .jq-select-multiple li.optgroup { font-weight: bold; } .jq-select-multiple li.option { padding-left: 25px; } input[type="email"].styler, input[type="number"].styler, input[type="password"].styler, input[type="search"].styler, input[type="tel"].styler, input[type="text"].styler, input[type="url"].styler, textarea.styler { padding: 7px 9px; border: 1px solid #CCC; border-bottom-color: #B3B3B3; border-radius: 4px; box-shadow: inset 1px 1px #F1F1F1, 0 1px 2px rgba(0,0,0,0.1); color: #333; font: 14px Arial, Tahoma, sans-serif; } input[type="search"].styler { -webkit-appearance: none; } textarea.styler { overflow: auto; } input[type="email"].styler:hover, input[type="number"].styler:hover, input[type="password"].styler:hover, input[type="search"].styler:hover, input[type="tel"].styler:hover, input[type="text"].styler:hover, input[type="url"].styler:hover, textarea.styler:hover { border-color: #B3B3B3; } input[type="email"].styler:focus, input[type="number"].styler:focus, input[type="password"].styler:focus, input[type="search"].styler:focus, input[type="tel"].styler:focus, input[type="text"].styler:focus, input[type="url"].styler:focus, textarea.styler:focus { border-color: #CCC; border-top-color: #B3B3B3; box-shadow: inset 0 1px 2px rgba(0,0,0,0.1); outline: none; } button.styler, input[type="button"].styler, input[type="submit"].styler, input[type="reset"].styler { overflow: visible; padding: 7px 11px; outline: none; border: 1px solid #CCC; border-bottom-color: #B3B3B3; border-radius: 4px; background: #F1F1F1 url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAAeCAIAAABi9+OQAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAABdJREFUeNpi+v//PxM2zMDAQEtxgAADAF2uTe9L4getAAAAAElFTkSuQmCC) repeat-x; box-shadow: inset 1px -1px #F1F1F1, inset -1px 0 #F1F1F1, 0 1px 2px rgba(0,0,0,0.1); color: #333; text-shadow: 1px 1px #FFF; font: 14px Arial, Tahoma, sans-serif; cursor: pointer; } button.styler::-moz-focus-inner, input[type="button"].styler::-moz-focus-inner, input[type="submit"].styler::-moz-focus-inner, input[type="reset"].styler::-moz-focus-inner { padding: 0; border: 0; } button.styler:after { content: ''; } button.styler:hover, input[type="button"].styler:hover, input[type="submit"].styler:hover, input[type="reset"].styler:hover { background-color: #E6E6E6; background-position: 0 -10px; } button.styler:active, input[type="button"].styler:active, input[type="submit"].styler:active, input[type="reset"].styler:active { background: #F5F5F5; box-shadow: inset 1px 1px 3px #DDD; } Подскажите, пожалуйста, что поправить
Многое нужно менять, position: relative например, но лично я без ссылки на сайт на котором это используется не могу говорить что именно.