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 https://i.stack.imgur.com/v1xt4.jpg

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'); }

score 3 · Accepted Answer · edited May 23 '17 at 10:27

3

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;
}

edited May 23 '17 at 10:27

Community

1
1

answered Nov 14 '15 at 18:03

Jacob G

13,762
3
47
67

score 1 · Answer 2 · answered Nov 14 '15 at 18:38

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

2 Answers2