.ui.input { display: inline-block; position: relative; color: rgba(0,0,0,.7); } .ui.input input { width: 100%; font-family: "Helvetica Neue",Helvetica,Arial; 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-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.input::-web inputkit-input-placeholder { color: #E0E0E0; } .ui.input::-moz input-placeholder { color: #E0E0E0; } .ui.input input:active, .ui.input.down input { border-color: rgba(0,0,0,.3); background-color: #FAFAFA; } .ui.loading.input>.icon { background: url(../images/loader-mini.gif) no-repeat 50% 50%; } .ui.loading.input>.icon:before, .ui.loading.input>.icon:after { display: none; } .ui.input.focus input, .ui.input input:focus { border-color: rgba(0,0,0,.2); color: rgba(0,0,0,.85); } .ui.input.focus input input::-webkit-input-placeholder, .ui.input input:focus input::-webkit-input-placeholder { color: #AAA; } .ui.input.focus input input::-moz-placeholder, .ui.input input:focus input::-moz-placeholder { color: #AAA; } .ui.input.error input { background-color: snow; border-color: #E7BEBE; color: #D95C5C; } .ui.input.error input ::-webkit-input-placeholder { color: rgba(255,80,80,.4); } .ui.input.error input ::-moz-placeholder { color: rgba(255,80,80,.4); } .ui.input.error input :focus::-webkit-input-placeholder { color: rgba(255,80,80,.7); } .ui.input.error input :focus::-moz-placeholder { color: rgba(255,80,80,.7); } .ui.transparent.input input { border: 0; background-color: transparent; } .ui.icon.input>.icon { cursor: default; position: absolute; opacity: .5; top: 0; right: 0; margin: 0; width: 2.6em; height: 100%; padding-top: .82em; text-align: center; border-radius: 0 .3125em .3125em 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; -webkit-transition: opacity .3s ease-out; transition: opacity .3s ease-out; } .ui.icon.input>.link.icon { cursor: pointer; } .ui.icon.input input { padding-right: 3em!important; } .ui.icon.input>.circular.icon { top: .35em; right: .5em; } .ui.left.icon.input>.icon { right: auto; left: 1px; border-radius: .3125em 0 0 .3125em; } .ui.left.icon.input>.circular.icon { right: auto; left: .5em; } .ui.left.icon.input>input { padding-left: 3em!important; padding-right: 1.2em!important; } .ui.icon.input>input:focus~.icon { opacity: 1; } .ui.labeled.input .corner.label { top: 1px; right: 1px; border-top-right-radius: .3125em; } .ui.labeled.input input { padding-right: 2.5em!important; } .ui.labeled.icon.input:not(.left)>input { padding-right: 3.25em!important; } .ui.labeled.icon.input:not(.left)>.icon { margin-right: .75em; } .ui.action.input { display: table; } .ui.action.input>input { display: table-cell; border-top-right-radius: 0!important; border-bottom-right-radius: 0!important; border-right: 0; } .ui.action.input>.button { display: table-cell; border-top-left-radius: 0; border-bottom-left-radius: 0; white-space: nowrap; } .ui.action.input>.button>.icon { display: inline; vertical-align: top; } .ui.fluid.input { display: block; } .ui.mini.input { font-size: .8125rem; } .ui.tiny.input { font-size: .875rem; } .ui.small.input { font-size: .875rem; } .ui.input { font-size: 1rem; } .ui.large.input { font-size: 1.125rem; } .ui.big.input { font-size: 1.25rem; } .ui.huge.input { font-size: 1.375rem; } .ui.massive.input { font-size: 1.5rem; }