lu2/theme/peak/css/common/ui/Radio.css

Simple and flexible UI component library based on native HTML and JavaScript

@charset "UTF-8";
/**
 * 
 * @Radio.css
 * @author zhangxinxu 
 * @create 15-06-17
 * @edit 17-06-14 focusable
**/
input[type=radio] {
  position: absolute;
  opacity: 0;
  width: 20px;
  height: 20px;
  filter: alpha(opacity=0);
  cursor: pointer;
  z-index: -1; }

.ui-radio {
  display: inline-block;
  width: 20px;
  height: 20px;
  border: 1px solid rgba(208, 208, 213, 0.99);
  /* IE7-IE8 ignore this */
  border-radius: 50%;
  background-color: #fff;
  box-sizing: border-box;
  vertical-align: -.5ex;
  *vertical-align: 0;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: border-color .2s;
  transition: border-color .2s;
  overflow: hidden; }

:not(:disabled) + .ui-radio:hover {
  border-color: #ababaf; }

:focus + .ui-radio {
  border-color: rgba(36, 134, 255, 0.99); }

.ui-radio::before {
  content: '';
  display: block;
  width: 10px;
  height: 10px;
  margin: 4px auto 0;
  border-radius: 50%;
  background-color: #2486ff;
  visibility: hidden; }

:checked + .ui-radio::before {
  visibility: visible;
  -webkit-animation: bounceIn .2s;
  animation: bounceIn .2s; }

:disabled + .ui-radio,
.ui-radio.disabled {
  border-color: #ababaf;
  opacity: .38; }

/* error */
.error.ui-radio {
  border-color: #f4615c; }

/*IE7, IE8 使用图片作UI*/
@media \0screen\,screen\9 {
  .ui-radio {
    background: url(images/Radio/radio.png) no-repeat; }
  .ui-radio:hover {
    background-position: 0 -20px; }
  [checked] + .ui-radio {
    background-position: 0 -40px; }
  [defaultChecked] + .ui-radio {
    background-position: 0 -40px; }
  [checked] + .ui-radio:hover,
  [checked][disabled] + .ui-radio {
    /* disabled态使用高亮边框 */
    background-position: 0 -60px; }
  [defaultChecked] + .ui-radio:hover,
  [defaultChecked][disabled] + .ui-radio {
    /* disabled态使用高亮边框 */
    background-position: 0 -60px; }
  [disabled] + .ui-radio {
    background-position: 0 -20px;
    filter: alpha(opacity=38); } }