title: Input with both Radio and checkbox characteristics
body: <p>I am looking to design a input field such that it will obey radio buttons characteristics as well as checkbox characteristics.</p>
  
  <p>The requirement is that there are some bars, to which when I click,  a text "hello" will be shown adjacent to that bar. and when I click on another bar, the "hello" text from the previous bar should hide and the clicked bar's "hello" text should be visible. </p>
  
  <p>This is happening in <a href="http://jsfiddle.net/dk9y4o15/" rel="nofollow">this fiddle</a></p>
  
  <pre><code>label {
      display: block;
      width: 100px;
      height: 20px;
      background-color: cornflowerblue;
      position: relative;
      margin-top: 10px;
      cursor: pointer;
  }
  span {
      display: none;
  }
  input[type="radio"] {
      visibility: hidden;
      position: absolute;
      pointer-events: none;
  }
  :checked + span {
      display: block;
      position: absolute;
      left: 100%;
  }
  </code></pre>
  
  <p>But what I want is each bar should act as toggle button to show/hide the "hello" text. I can achieve this if I use checkboxes instead of radio button but I will lose the behavior which I achieved above using radio buttons.</p>
  
  <p>I am looking for a pure css solution.</p>
  
  <p>Thanks in advance.</p>
  
  <p><strong>EDIT</strong>:</p>
  
  <p>This is what I want. <strong><a href="http://jsfiddle.net/dk9y4o15/4/" rel="nofollow">Fiddle</a></strong></p>
  
  <p>But using only css.</p>