Databases
StackOverflow2013
Postsdbo
POFull width input buttons on same line
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POFull width input buttons on same line
    text
    copied!<p>I'm trying to make two input buttons (yes/no) display on the same line with maximum width for both. I want the width of the buttons to scale down in size as the browser window size decreases.</p> <p><a href="http://jsfiddle.net/jasonniebauer/grQGP/1/" rel="nofollow">http://jsfiddle.net/jasonniebauer/grQGP/1/</a></p> <pre><code>&lt;div id="merchant_radio6"&gt; &lt;p&gt; Ever accepted credit cards before? &lt;/p&gt; &lt;div&gt; &lt;input type="radio" id="yes" name="accept_cc"/&gt; &lt;label for="yes"&gt; Yes &lt;/label&gt; &lt;input type="radio" id="no" name="accept_cc"/&gt; &lt;label for="no"&gt; No &lt;/label&gt; &lt;/div&gt; &lt;/div&gt; #merchant_radio6 input[type="radio"], #merchant_radio7 input[type="radio"] { display: none; } #merchant_radio6 input[type="radio"] + label, #merchant_radio7 input[type="radio"] + label { box-sizing:border-box; padding: 1rem 3rem 1rem 3rem; width: 100%; display: inline-block; color: #BDC3C7; background-color: #F2F2F2; text-align: center; vertical-align: middle; cursor: pointer; border-radius: 3px; -webkit-transition: border .25s linear, color .25s linear, background-color .25s linear; -webkit-transition-property: border, color, background-color; -webkit-transition-duration: 0.25s, 0.25s, 0.25s; -webkit-transition-timing-function: linear, linear, linear; -webkit-transition-delay: initial, initial, initial; transition: border .25s linear, color .25s linear, background-color .25s linear; transition-property: border, color, background-color; transition-duration: 0.25s, 0.25s, 0.25s; transition-timing-function: linear, linear, linear; transition-delay: initial, initial, initial; } #merchant_radio6 input[type="radio"] + label:nth-of-type(2), #merchant_radio7 input[type="radio"] + label:nth-of-type(2) { margin-left: 1rem; } #merchant_radio6 input[type="radio"]:checked + label, #merchant_radio7 input[type="radio"]:checked + label { background-color: #3498DB; color: #FFFFFF; outline: 0; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload