CSS风格的单选按钮不响应键盘

我正在使用CSS来设置我的单选按钮，如iOS分段按钮。他们不响应键盘输入。我错过了什么？CSS风格的单选按钮不响应键盘

下面是一个例子的HTML：

<nav class="segmented-button"> 
     <input type="radio" name="seg-1" value="Organisation" id="seg-Organisation" checked> 
     <label for="seg-Organisation" class="first">Organisation</label> 
     <input type="radio" name="seg-1" value="Users" id="seg-Users"> 
     <label for="seg-Users">Users</label> 
     <input type="radio" name="seg-1" value="Units" id="seg-Units" disabled> 
     <label for="seg-Units">Units</label> 
     <input type="radio" name="seg-1" value="Tags" id="seg-Tags"> 
     <label for="seg-Tags" class="last">Tags</label> 
    </nav>

这里是CSS

.segmented-button { 
    padding: 12px; 
} 
.segmented-button input[type="radio"] { 
    width: 0px; 
    height: 0px; 
    display: none; 
} 
.segmented-button label { 
    display: -moz-inline-box; 
    -moz-box-orient: vertical; 
    display: inline-block; 
    vertical-align: middle; 
    *vertical-align: auto; 
    -moz-border-radius: 4px; 
    -webkit-border-radius: 4px; 
    -o-border-radius: 4px; 
    -ms-border-radius: 4px; 
    -khtml-border-radius: 4px; 
    border-radius: 4px; 
    text-shadow: white; 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #e4e4e4)); 
    background: -webkit-linear-gradient(#ffffff, #e4e4e4); 
    background: -moz-linear-gradient(#ffffff, #e4e4e4); 
    background: -o-linear-gradient(#ffffff, #e4e4e4); 
    background: -ms-linear-gradient(#ffffff, #e4e4e4); 
    background: linear-gradient(#ffffff, #e4e4e4); 
    border: 1px solid #b2b2b2; 
    color: #666666; 
    padding: 5px 24px; 
    padding-bottom: 3px; 
    font-size: 12px; 
    cursor: pointer; 
    font-family: Helvetica; 
    -moz-border-radius: 0px; 
    -webkit-border-radius: 0px; 
    -o-border-radius: 0px; 
    -ms-border-radius: 0px; 
    -khtml-border-radius: 0px; 
    border-radius: 0px; 
    margin-right: -5px; 
} 
.segmented-button label { 
    *display: inline; 
} 
.segmented-button label:hover { 
    -moz-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
    -webkit-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
    -o-box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
    box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.1); 
    color: #333333; 
} 
.segmented-button label:active, .segmented-button label.active { 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e4e4e4), color-stop(100%, #ffffff)); 
    background: -webkit-linear-gradient(#e4e4e4, #ffffff); 
    background: -moz-linear-gradient(#e4e4e4, #ffffff); 
    background: -o-linear-gradient(#e4e4e4, #ffffff); 
    background: -ms-linear-gradient(#e4e4e4, #ffffff); 
    background: linear-gradient(#e4e4e4, #ffffff); 
} 
.segmented-button label:disabled, .segmented-button label.disabled { 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #efefef)); 
    background: -webkit-linear-gradient(#ffffff, #efefef); 
    background: -moz-linear-gradient(#ffffff, #efefef); 
    background: -o-linear-gradient(#ffffff, #efefef); 
    background: -ms-linear-gradient(#ffffff, #efefef); 
    background: linear-gradient(#ffffff, #efefef); 
    cursor: default; 
    color: #b2b2b2; 
    border-color: #cccccc; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    -o-box-shadow: none; 
    box-shadow: none; 
} 
.segmented-button label.first { 
    -moz-border-radius-topleft: 4px; 
    -webkit-border-top-left-radius: 4px; 
    -o-border-top-left-radius: 4px; 
    -ms-border-top-left-radius: 4px; 
    -khtml-border-top-left-radius: 4px; 
    border-top-left-radius: 4px; 
    -moz-border-radius-bottomleft: 4px; 
    -webkit-border-bottom-left-radius: 4px; 
    -o-border-bottom-left-radius: 4px; 
    -ms-border-bottom-left-radius: 4px; 
    -khtml-border-bottom-left-radius: 4px; 
    border-bottom-left-radius: 4px; 
} 
.segmented-button label.last { 
    -moz-border-radius-topright: 4px; 
    -webkit-border-top-right-radius: 4px; 
    -o-border-top-right-radius: 4px; 
    -ms-border-top-right-radius: 4px; 
    -khtml-border-top-right-radius: 4px; 
    border-top-right-radius: 4px; 
    -moz-border-radius-bottomright: 4px; 
    -webkit-border-bottom-right-radius: 4px; 
    -o-border-bottom-right-radius: 4px; 
    -ms-border-bottom-right-radius: 4px; 
    -khtml-border-bottom-right-radius: 4px; 
    border-bottom-right-radius: 4px; 
} 
.segmented-button input:checked + label, .segmented-button label.selected { 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #e4e4e4), color-stop(100%, #ffffff)); 
    background: -webkit-linear-gradient(#e4e4e4, #ffffff); 
    background: -moz-linear-gradient(#e4e4e4, #ffffff); 
    background: -o-linear-gradient(#e4e4e4, #ffffff); 
    background: -ms-linear-gradient(#e4e4e4, #ffffff); 
    background: linear-gradient(#e4e4e4, #ffffff); 
} 
.segmented-button input:disabled + label { 
    background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #ffffff), color-stop(100%, #efefef)); 
    background: -webkit-linear-gradient(#ffffff, #efefef); 
    background: -moz-linear-gradient(#ffffff, #efefef); 
    background: -o-linear-gradient(#ffffff, #efefef); 
    background: -ms-linear-gradient(#ffffff, #efefef); 
    background: linear-gradient(#ffffff, #efefef); 
    cursor: default; 
    color: #b2b2b2; 
    border-color: #cccccc; 
    -moz-box-shadow: none; 
    -webkit-box-shadow: none; 
    -o-box-shadow: none; 
    box-shadow: none; 
}

这里是小提琴http://jsfiddle.net/schinckel/BLkmc/3/light/

来源

2013-05-04 Mc.Stever

不要隐藏输入与display: none，当然你不能集中元素不是页面的一部分。尝试另一种方法：

.segmented-button input[type="radio"] { 
    position: absolute; 
    top: -1000px; 
}

http://jsfiddle.net/BLkmc/34/（结果：http://jsfiddle.net/BLkmc/34/embedded/result/）

来源

2013-05-04 13:56:10 dfsq

优秀。谢谢。 – 2013-05-05 00:20:21

这是响应键盘输入的输入（:focus），并且您将它们全部设置为

width: 0px; 
height: 0px; 
display: none;

......这意味着它们被有效地禁用。

来源

2013-05-04 13:45:21

CSS风格的单选按钮不响应键盘

回答

相关问题