.ui.form { position: relative; max-width: 100%; } .ui.form :first-child { margin-top: 0; } .ui.form :last-child { margin-bottom: 0; } .ui.form>p { margin: 1em 0; } .ui.form .field { clear: both; margin: 0 0 1em; } .ui.form .field>label { margin: 0 0 .3em; display: block; color: #555; font-size: .875em; } .ui.form textarea, .ui.form input[type=text], .ui.form input[type=email], .ui.form input[type=date], .ui.form input[type=password], .ui.form input[type=number], .ui.form input[type=tel], .ui.form .ui.input { width: 100%; } .ui.form textarea, .ui.form input[type=text], .ui.form input[type=email], .ui.form input[type=date], .ui.form input[type=password], .ui.form input[type=number], .ui.form input[type=tel] { margin: 0; padding: .85em 1.2em; font-size: .875em; background-color: #FFF; border: 1px solid rgba(0,0,0,.15); outline: 0; color: rgba(0,0,0,.7); border-radius: .3125em; -webkit-transition: background-color .3s ease-out,-webkit-box-shadow .2s ease,border-color .2s ease; transition: background-color .3s ease-out,box-shadow .2s ease,border-color .2s ease; -webkit-box-shadow: 0 0 rgba(0,0,0,.3) inset; box-shadow: 0 0 rgba(0,0,0,.3) inset; -webkit-appearance: none; -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.textarea, .ui.form textarea { line-height: 1.33; min-height: 8em; height: 12em; max-height: 24em; resize: vertical; } .ui.form textarea, .ui.form input[type=checkbox] { vertical-align: top; } .ui.form .divider { clear: both; margin: 1em 0; } .ui.form .info.message, .ui.form .warning.message, .ui.form .error.message { display: none; } .ui.form .message:first-child { margin-top: 0; } .ui.form .field .prompt.label { white-space: nowrap; } .ui.form .inline.field .prompt { margin-top: 0; margin-right: 1em; } .ui.form .inline.field .prompt:before { margin-top: -.3em; bottom: auto; left: auto; top: 50%; right: 0; } .ui.form input[type=text]:focus, .ui.form input[type=email]:focus, .ui.form input[type=date]:focus, .ui.form input[type=password]:focus, .ui.form input[type=number]:focus, .ui.form input[type=tel]:focus, .ui.form textarea:focus { color: rgba(0,0,0,.85); border-color: rgba(0,0,0,.2); border-bottom-right-radius: 0; border-top-right-radius: 0; -webkit-appearance: none; -webkit-box-shadow: .3em 0 0 0 rgba(0,0,0,.2) inset; box-shadow: .3em 0 0 0 rgba(0,0,0,.2) inset; } .ui.form.warning .warning.message { display: block; } .ui.form.error .error.message { display: block; } .ui.form .fields.error .field label, .ui.form .field.error label, .ui.form .fields.error .field .input, .ui.form .field.error .input { color: #D95C5C; } .ui.form .fields.error .field .corner.label, .ui.form .field.error .corner.label { border-color: #D95C5C; color: #FFF; } .ui.form .fields.error .field textarea, .ui.form .fields.error .field input[type=text], .ui.form .fields.error .field input[type=email], .ui.form .fields.error .field input[type=date], .ui.form .fields.error .field input[type=password], .ui.form .fields.error .field input[type=number], .ui.form .fields.error .field input[type=tel], .ui.form .field.error textarea, .ui.form .field.error input[type=text], .ui.form .field.error input[type=email], .ui.form .field.error input[type=date], .ui.form .field.error input[type=password], .ui.form .field.error input[type=number], .ui.form .field.error input[type=tel] { background-color: snow; border-color: #E7BEBE; border-right: 0; color: #D95C5C; padding-right: 1.2em; border-bottom-right-radius: 0; border-top-right-radius: 0; -webkit-box-shadow: .3em 0 0 0 #D95C5C inset; box-shadow: .3em 0 0 0 #D95C5C inset; } .ui.form .field.error textarea:focus, .ui.form .field.error input[type=text]:focus, .ui.form .field.error input[type=email]:focus, .ui.form .field.error input[type=date]:focus, .ui.form .field.error input[type=password]:focus, .ui.form .field.error input[type=number]:focus, .ui.form .field.error input[type=tel]:focus { border-color: #ff5050; color: #ff5050; -webkit-appearance: none; -webkit-box-shadow: .3em 0 0 0 #FF5050 inset; box-shadow: .3em 0 0 0 #FF5050 inset; } .ui.form ::-webkit-input-placeholder { color: #E0E0E0; } .ui.form ::-moz-placeholder { color: #E0E0E0; } .ui.form :focus::-webkit-input-placeholder { color: #AAA; } .ui.form :focus::-moz-placeholder { color: #AAA; } .ui.form .error ::-webkit-input-placeholder { color: rgba(255,80,80,.4); } .ui.form .error ::-moz-placeholder { color: rgba(255,80,80,.4); } .ui.form .error :focus::-webkit-input-placeholder { color: rgba(255,80,80,.7); } .ui.form .error :focus::-moz-placeholder { color: rgba(255,80,80,.7); } .ui.form .field :disabled, .ui.form .field.disabled { opacity: .5; } .ui.form .field.disabled label { opacity: .5; } .ui.form .field.disabled :disabled { opacity: 1; } .ui.form.loading { position: relative; } .ui.form.loading:after { position: absolute; top: 0; right: 0; content: ''; width: 100%; height: 100%; background: rgba(255,255,255,.8) url(../images/loader-large.gif) no-repeat 50% 50%; visibility: visible; } .ui.form.fluid { width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.form input.attached { width: auto; } .ui.form .date.field>label { position: relative; } .ui.form .date.field>label:after { position: absolute; top: 2em; left: .5em; font-family: Icons; content: '\f133'; font-size: 1.2em; font-weight: 400; color: #CCC; } .ui.inverted.form label { color: #FFF; } .ui.inverted.form .field.error textarea, .ui.inverted.form .field.error input[type=text], .ui.inverted.form .field.error input[type=email], .ui.inverted.form .field.error input[type=date], .ui.inverted.form .field.error input[type=password], .ui.inverted.form .field.error input[type=number], .ui.inverted.form .field.error input[type=tel] { background-color: #FCC; } .ui.form .grouped.fields { margin: 0 0 1em; } .ui.form .grouped.fields .field { display: block; float: none; margin: .5em 0; padding: 0; } .ui.form .fields { clear: both; } .ui.form .fields:after { content: ' '; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } .ui.form .fields>.field { clear: none; float: right; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .ui.form .fields>.field:first-child { border-right: 0; -webkit-box-shadow: none; box-shadow: none; } .ui.form .two.fields>.fields, .ui.form .two.fields>.field { width: 50%; padding-right: 1%; padding-left: 1%; } .ui.form .three.fields>.fields, .ui.form .three.fields>.field { width: 33.333%; padding-right: 1%; padding-left: 1%; } .ui.form .four.fields>.fields, .ui.form .four.fields>.field { width: 25%; padding-right: 1%; padding-left: 1%; } .ui.form .five.fields>.fields, .ui.form .five.fields>.field { width: 20%; padding-right: 1%; padding-left: 1%; } .ui.form .fields .field:first-child { padding-right: 0; } .ui.form .fields .field:last-child { padding-left: 0; } .ui.form .inline.fields .field { min-height: 1.3em; margin-left: .5em; } .ui.form .inline.fields .field>label, .ui.form .inline.fields .field>p, .ui.form .inline.fields .field>input, .ui.form .inline.field>label, .ui.form .inline.field>p, .ui.form .inline.field>input { display: inline-block; width: auto; margin-top: 0; margin-bottom: 0; vertical-align: middle; font-size: 1em; } .ui.form .inline.fields .field>input, .ui.form .inline.field>input { font-size: .875em; } .ui.form .inline.fields .field>:first-child, .ui.form .inline.field>:first-child { margin: 0 0 0 .5em; } .ui.form .inline.fields .field>:only-child, .ui.form .inline.field>:only-child { margin: 0; } .ui.small.form { font-size: .875em; } .ui.small.form textarea, .ui.small.form input[type=text], .ui.small.form input[type=email], .ui.small.form input[type=date], .ui.small.form input[type=password], .ui.small.form input[type=number], .ui.small.form input[type=tel], .ui.small.form label { font-size: 1em; } .ui.large.form { font-size: 1.125em; }