Icons after radio button

Question

Why can't I put icon after the radio button ?

Where am I wrong ? I also would like to put three radio buttons horizontally. How can i make this ? It should look like this http://imgur.com/3FbbAql

JS Fiddle : http://jsfiddle.net/5urfzLg3/

#visa:after {
content: '';
display: block;
width: 32px;
height: 28px;
background: url('img/https://upload.wikimedia.org/wikipedia/commons/1/13/Farm-Fresh_visa.png'); }

Answer 1

Replaced Elements ( img , input , area ,etc.) cannot have :before or :after ( Learn more from this SO answer ).
To make them horizontal, just display them inline-block :

.box input[type="radio"]{
  display:inline-block;
}

Answer 2

I think this is what you want !! Welcome in advance :)

 body { background-image: url('img/formBackground.jpg'); background-repeat: no-repeat; } #wrapper { width: 420px; height: 900px; margin: 20 auto; } h2 { color: white; font-family: Verdana; font-size: 18px; padding: 5px; margin-top: 5px; margin-bottom: 0px; } .box { padding: 10px; margin: 5px; margin-bottom: 2px; margin-top: 2px; border: 1px solid rgb(210, 210, 210); border-radius: 5px; background-color: rgba(255, 255, 255, 0.2); } .box span { display: inline-block; width: 100px; height: 18px; } .box input { width: 210px; margin: 0 auto; padding: 4px; } .box textarea { width: 210px; height: 130px; max-width: 210px; } #specific { height: 100px; vertical-align: top; padding-top: 5px; padding-left: 5px; } ::-webkit-input-placeholder { color: grey; } :-moz-placeholder { /* Firefox 18- */ color: grey; } ::-moz-placeholder { /* Firefox 19+ */ color: grey; } :-ms-input-placeholder { color: grey; } #visa:after { content: ''; display: block; width: 32px; height: 28px; background: url('img/Farm-Fresh_visa.png'); } .box.cards { clear: both; display: table; } .box.cards span { float: left; } #cards { float: left; clear: none; } label { float: left; clear: none; display: block; padding: 0px 1em 0 0; } input[type=radio], input.radio { float: left; clear: none; margin: 3px 3px 0 2px; width: auto; }

 <body> <div id="wrapper"> <h2>Step 1: Your details</h2> <div class="box"> <span>User</span> <input type="text" name="username" placeholder="First and last name"> </div> <div class="box"> <span>Email</span> <input type="email" name="email" placeholder="example@domain.com"> </div> <div class="box"> <span>Phone</span> <input type="text" name="phone" placeholder="eg. +44750000000"> </div> <h2>Step 1: Delivery adress</h2> <div class="box"> <span id="specific">Adress</span> <textarea></textarea> </div> <div class="box"> <span>Post Code</span> <input type="text" name="post-code"> </div> <div class="box"> <span>Country</span> <input type="text" name="country"> </div> <h2>Step 1: Card details</h2> <div class="box cards"> <span>Card type</span> <div id="cards"> <input type="radio" name="visa" id="visa"> <label for="visa">visa</label> <input type="radio" name="AmEx" id="AmEx"> <label for="AmEx">AmEx</label> <input type="radio" name="mastercard" id="mastercard"> <label for="mastercard">mastercard</label> </div> </div> </div> </body>

Icons after radio button

Question

2 answers

solution1
3 ACCPTED 2015-11-14 18:03:31

solution2
1 2015-11-14 18:38:24

Icons after radio button

Question

2 answers

solution1 3 ACCPTED 2015-11-14 18:03:31

solution2 1 2015-11-14 18:38:24

solution1
3 ACCPTED 2015-11-14 18:03:31

solution2
1 2015-11-14 18:38:24