對於訪問者不活動的HTML開關

我想在我的網頁上添加一個HTML開關，但問題是 - 我想看看我的切換狀態，所以訪問者不能改變它，但只能看到。對於訪問者不活動的HTML開關

我有這樣的：

.onoffswitch { 
 
    position: relative; width: 122px; 
 
    -webkit-user-select:none; -moz-user-select:none; -ms-user-select: none; 
 
} 
 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 
.onoffswitch-label { 
 
    display: block; overflow: hidden; cursor: pointer; 
 
    border: 2px solid #FFFFFF; border-radius: 20px; 
 
} 
 
.onoffswitch-inner { 
 
    display: block; width: 200%; margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-inner:before, .onoffswitch-inner:after { 
 
    display: block; float: left; width: 50%; height: 26px; padding: 0; line-height: 26px; 
 
    font-size: 14px; color: white; font-family: Trebuchet, Arial, sans-serif; font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "otevreno"; 
 
    padding-left: 12px; 
 
    background-color: #34C258; color: #000000; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "zavreno"; 
 
    padding-right: 12px; 
 
    background-color: #D16464; color: #000000; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; width: 5px; margin: 10.5px; 
 
    background: #FFFFFF; 
 
    position: absolute; top: 0; bottom: 0; 
 
    right: 92px; 
 
    border: 2px solid #FFFFFF; border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: 0px; 
 
}

<div class="onoffswitch"> 
 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"> 
 
    <label class="onoffswitch-label" for="myonoffswitch"> 
 
     <span class="onoffswitch-inner"></span> 
 
     <span class="onoffswitch-switch"></span> 
 
    </label> 
 
</div>

我的問題是：如何使切換不活動的遊客，誰能夠只看到切換的狀態（「otevreno」或「zavreno」），只有我可以編輯切換器的狀態？

謝謝。

來源

2016-04-04 Roman Žydyk

我相信你應該能夠將'readonly'屬性添加到輸入中？只是'readonly'，而不'readonly =「etc」'。 – Katana314

將disabled加到您的input標記中。

<input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" disabled>

我已經修改了以下background: transparent;和border: 2px solid transparent;

.onoffswitch-switch { 
    display: block; 
    width: 5px; 
    margin: 10.5px; 
    background: transparent; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 92px; 
    border: 2px solid transparent; 
    border-radius: 20px; 
    transition: all 0.3s ease-in 0s; 
}

代碼段：

.onoffswitch { 
 
    position: relative; 
 
    width: 122px; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
} 
 
.onoffswitch-checkbox { 
 
    display: none; 
 
} 
 
.onoffswitch-label { 
 
    display: block; 
 
    overflow: hidden; 
 
    cursor: pointer; 
 
    border: 2px solid #FFFFFF; 
 
    border-radius: 20px; 
 
} 
 
.onoffswitch-inner { 
 
    display: block; 
 
    width: 200%; 
 
    margin-left: -100%; 
 
    transition: margin 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-inner:before, 
 
.onoffswitch-inner:after { 
 
    display: block; 
 
    float: left; 
 
    width: 50%; 
 
    height: 26px; 
 
    padding: 0; 
 
    line-height: 26px; 
 
    font-size: 14px; 
 
    color: white; 
 
    font-family: Trebuchet, Arial, sans-serif; 
 
    font-weight: bold; 
 
    box-sizing: border-box; 
 
} 
 
.onoffswitch-inner:before { 
 
    content: "otevreno"; 
 
    padding-left: 12px; 
 
    background-color: #34C258; 
 
    color: #000000; 
 
} 
 
.onoffswitch-inner:after { 
 
    content: "zavreno"; 
 
    padding-right: 12px; 
 
    background-color: #D16464; 
 
    color: #000000; 
 
    text-align: right; 
 
} 
 
.onoffswitch-switch { 
 
    display: block; 
 
    width: 5px; 
 
    margin: 10.5px; 
 
    background: transparent; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    right: 92px; 
 
    border: 2px solid transparent; 
 
    border-radius: 20px; 
 
    transition: all 0.3s ease-in 0s; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-inner { 
 
    margin-left: 0; 
 
} 
 
.onoffswitch-checkbox:checked + .onoffswitch-label .onoffswitch-switch { 
 
    right: 0px; 
 
}

<div class="onoffswitch"> 
 
    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" disabled> 
 
    <label class="onoffswitch-label" for="myonoffswitch"> 
 
    <span class="onoffswitch-inner"></span> 
 
    <span class="onoffswitch-switch"></span> 
 
    </label> 
 
</div>

來源

2016-04-04 14:06:54 Pugazh

還應該**表明該按鈕已禁用**，因爲人們會認爲您的網站如果沒有被破壞，這永遠都不會好 –

正確。但根據要求，我提出了一個解決方案:-) – Pugazh

Pugazh：是的，這就是它！最後，也許愚蠢的問題，現在，如果我想切換它，我必須重寫代碼中的東西，對吧？我很抱歉，但我不知道我應該重寫什麼，我只是一個初學者。謝謝你的建議。 –

對於訪問者不活動的HTML開關

回答

相關問題