text: Q:
  
  input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField{display: inline-block;} not working in Safari
  
  Working with a set of radio select buttons and a text input field in HTML.
  <fieldset>
      <input type="radio" name="amount_choose" id="amountSelection40" value="40.00">
      <label for="amountSelection40">$40.00</label>
  
      <input type="radio" name="amount_choose" id="amountSelectionOther" value="Other">
      <label for="amountSelectionOther" class="amountSelectionLabelOther">Other</label>
      <input type="text" id="amountSelectionOtherField" name="amount_Other">
  </fieldset>
  
  I have CSS marking the text input#amountSelectionOtherField as display none.  The idea being I only want the text box to show up if the "Other" radio button is checked.
  input[type="radio"]#amountSelectionOther:checked+label+input#amountSelectionOtherField
      {display: inline-block;}
  
  The CSS works in Chrome, Firefox, IE on a Windows machine and Chrome, Firefox on my MAC but not on Safari.
  Interestingly enough when I view the page in Safari on my iOS devices it doesn't appear to work either, however if after I have selected the "other" radio button and then do an oration change on my device the text input will appear.  If I change the radio selector back to 40, the text input does not disappear until I change my orientation again.
  I am NOT using ANY media queries in my CSS file at all.  So is this just a quirk of Safari?  Any suggestion about how to make this work without having to resort to JS?
  
  A:
  
  I just tested the following in Safari (ver 8.0.2) and it worked fine. I simplified the selection by using a general sibling (~) selector.
  input#amountSelectionOtherField{display: none;}
  input#amountSelectionOther:checked ~ input#amountSelectionOtherField {display: inline-block; }
  
  Here is a fiddle for it: http://jsfiddle.net/ugnyaLua/14/
  Here is an article on the ~ selector: https://css-tricks.com/almanac/selectors/g/general-sibling/
  
  