Создание простого тумблера

Question

Я пытаюсь создать кнопку переключения в CSS. Я попытался сделать это с помощью переключателя, так как я хочу, чтобы только один из двух был выбран, когда был нажат и не выбрал другого.

Это то, что я хотел бы, чтобы он выглядел, но я продолжаю терпеть неудачу при этом.

Я надеюсь, что кто-то там, что может легко показать мне, как я могу получить что-то подобное. Вам не нужно стилизовать его или что-то еще, просто чтобы сделать основную форму, и я могу справиться с остальными.

Поскольку у меня есть какие-то другие ресурсы, было бы лучше, если бы вы использовали класс, а не:

input { 
} 

Answer 1

я мог бы получить некоторые ссылки здесь .... он работал на меня, проверить самостоятельно CSS Toggle Switch

Answer 2

Вы можете использовать тег <a>, чтобы связать изображение, с помощью onclick listener, чтобы определить, что нужно делать. И придать форму вашему <a> css.

Answer 3

Как вы просили очень простую структуру. JSFiddle.

CSS

.switchWrapper { 
    display: inline-block; 
    width: 400px; 
    background: #0CF; 
    height: 100px; 
} 

.switchWrapper .leftSide { 
    float: left; 
    width: 160px; 
    background: #F00; 
    height: 80px; 
    margin: 10px 0 0 40px; 
    padding: 0; 
} 

.switchWrapper .rightSide { 
    float: left; 
    width: 160px; 
    background: #0F0; 
    height: 80px; 
    margin: 10px 0 0 0; 
    padding: 0; 
} 

.switchWrapper span { 
    text-align: center; 
    display: block; 
    vertical-align: middle; 
    margin-top: 31px; 
} 

HTML

<div class="switchWrapper"> 
    <div class="leftSide"> 
     <span>Some text</span> 
    </div> 
    <div class="rightSide"> 
     <span>Some text</span> 
    </div> 
</div> 

Answer 4

Как прокомментировал, ну, идея заключается в том, чтобы использовать checkbox, который будет находиться на том же уровне, или должен быть родителем уровень div, который вы хотите переключить, поэтому здесь, в this demo, у меня есть все на одном уровне, остальные объясняются в комментариях CSS ...

.one, .two { /* Hide both the elements first */ 
    display: none; 
} 

input[type=radio]:nth-of-type(1):checked + input[type=radio] + div.one { 
    display: block; 
    /* On check of radio 1, we select adjacent radio, 
     and than we target adjacent element which is .one and we make it 
     display: block; */ 
} 

input[type=radio]:nth-of-type(2):checked + div.one + div.two { 
    display: block; 
    /* On check of radio 2, we select adjacent div which is div.one, 
     and than we target adjacent div again which is .two and we make it 
     display: block; */ 
} 

---

не уверен, хотите ли вы иметь тумблер с помощью CSS или вы ищете что дизайн, если вы ищете дизайн, чем здесь вы идете ..

Я использовал CSS градиенты, с box-shadow набор в inset для неактивного элемента, остальное само за себя, вы можете свистеть мне, если вы искали тумблер

Demo

@font-face { 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: 400; 
    src: local('Open Sans'), local('OpenSans'), url(http://themes.googleusercontent.com/static/fonts/opensans/v6/cJZKeOuBrn4kERxqtaUH3T8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'); 
} 

body { 
    background: #F6F6F6; 
    font-family: Open Sans; 
} 

div { 
    margin: 100px; 
    border: 1px solid #B4B4B4; 
    display: inline-block; 
    border-radius: 4px; 
} 

div a { 
    text-decoration: none; 
    color: inherit; 
    padding: 15px 10px; 
    text-align: center; 
    display: inline-block; 
    width: 140px;  
} 

.active { 
    border-radius: 0 4px 4px 0; 
    background: linear-gradient(to bottom, #fcfcfc 0%,#e0e0e0 100%); 
} 

.inactive { 
    background: #CFD0D3; 
    box-shadow: inset 0 0 10px #818181; 
    border-radius: 4px 0 0 4px; 
}