Question

我有一个表单，其中，我想使用图像而不是单选按钮。如何显示多个图像，而不是单选按钮。例如，性别与男性＆＃39; ＆安培; ＆＃39;女性＆＃39;图片。它应该是功能性的。我想隐藏单选按钮并放置图像。我从堆栈溢出中得到了一个解决方案，这里是小提琴：

＆＃13;

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

＆＃13;

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

＆＃13;

但是在这里，问题出现了，当我将输入id更改为某个不同的名称并且它不起作用时。任何人都可以帮助我，因为这是一个非常简短的方法，我想用这个。您可以将输入ID更改为＆＃39; visa1＆＃39;并看到结果。

Answer 1

如果您更改输入“id”，则更改相关标签“for”。

例如：

如果您将输入ID更改为“visa1”，则表示更改=“visa1”的相关标签

<input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
<label class="drinkcard-cc visa" for="visa1"></label>

运行以下代码段：

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa1" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa1"></label>
        <input id="mastercard1" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard1"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

Answer 2

试试这个http://www.csscheckbox.com/css-checkbox-generator.php 它是一个免费的在线工具，用于生成交叉浏览器兼容的自定义复选框/单选按钮，您可能必须上传图像以进行选中和取消选中状态

Answer 3

＆＃13;

.cc-selector input{
        margin:0;padding:0;
        -webkit-appearance:none;
           -moz-appearance:none;
                appearance:none;
    }

    .cc-selector-2 input{
        position:absolute;
        z-index:999;
    }

    .visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
    .mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

    .cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
    .cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
        -webkit-filter: none;
           -moz-filter: none;
                filter: none;
    }
    .drinkcard-cc{
        cursor:pointer;
        background-size:contain;
        background-repeat:no-repeat;
        display:inline-block;
        width:100px;height:70px;
        -webkit-transition: all 100ms ease-in;
           -moz-transition: all 100ms ease-in;
                transition: all 100ms ease-in;
        -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
           -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
                filter: brightness(1.8) grayscale(1) opacity(.7);
    }
    .drinkcard-cc:hover{
        -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
           -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
                filter: brightness(1.2) grayscale(.5) opacity(.9);
    }

    /* Extras */
    a:visited{color:#888}
    a{color:#444;text-decoration:none;}
    p{margin-bottom:.3em;}
    * { font-family:monospace; }
    .cc-selector-2 input{ margin: 5px 0 0 12px; }
    .cc-selector-2 label{ margin-left: 7px; }
    span.cc{ color:#6d84b4 }
	
	form input{ /* HIDE RADIO */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

＆＃13;

<form>
        <p>Previously:</p>
        <div>
            <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
            <label for="a1">Visa</label><br/>
            <input id="a2" type="radio" name="a" value="mastercard" />
            <label for="a2">Mastercard</label>
        </div>
        <p>Now, with CSS3: </p>
        <div class="cc-selector">
            <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
            <label class="drinkcard-cc visa" for="visa"></label>
            <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
            <label class="drinkcard-cc mastercard"for="mastercard"></label>
        </div>
        
        
    </form>
    <small><a href="https://github.com/rcotrina94/icons">
        &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

＆＃13;

.cc-selector input{
    margin:0;padding:0;
    -webkit-appearance:none;
       -moz-appearance:none;
            appearance:none;
}

.cc-selector-2 input{
    position:absolute;
    z-index:999;
}

.visa{background-image:url(http://i.imgur.com/lXzJ1eB.png);}
.mastercard{background-image:url(http://i.imgur.com/SJbRQF7.png);}

.cc-selector-2 input:active +.drinkcard-cc, .cc-selector input:active +.drinkcard-cc{opacity: .9;}
.cc-selector-2 input:checked +.drinkcard-cc, .cc-selector input:checked +.drinkcard-cc{
    -webkit-filter: none;
       -moz-filter: none;
            filter: none;
}
.drinkcard-cc{
    cursor:pointer;
    background-size:contain;
    background-repeat:no-repeat;
    display:inline-block;
    width:100px;height:70px;
    -webkit-transition: all 100ms ease-in;
       -moz-transition: all 100ms ease-in;
            transition: all 100ms ease-in;
    -webkit-filter: brightness(1.8) grayscale(1) opacity(.7);
       -moz-filter: brightness(1.8) grayscale(1) opacity(.7);
            filter: brightness(1.8) grayscale(1) opacity(.7);
}
.drinkcard-cc:hover{
    -webkit-filter: brightness(1.2) grayscale(.5) opacity(.9);
       -moz-filter: brightness(1.2) grayscale(.5) opacity(.9);
            filter: brightness(1.2) grayscale(.5) opacity(.9);
}

/* Extras */
a:visited{color:#888}
a{color:#444;text-decoration:none;}
p{margin-bottom:.3em;}
* { font-family:monospace; }
.cc-selector-2 input{ margin: 5px 0 0 12px; }
.cc-selector-2 label{ margin-left: 7px; }
span.cc{ color:#6d84b4 }

＆＃13;

<form>
    <p>Previously:</p>
    <div>
        <input checked="checked"  id="a1" type="radio" name="a" value="visa" />
        <label for="a1">Visa</label><br/>
        <input id="a2" type="radio" name="a" value="mastercard" />
        <label for="a2">Mastercard</label>
    </div>
    <p>Now, with CSS3: </p>
    <div class="cc-selector">
        <input checked="checked" id="visa" type="radio" name="credit-card" value="visa" />
        <label class="drinkcard-cc visa" for="visa"></label>
        <input id="mastercard" type="radio" name="credit-card" value="mastercard" />
        <label class="drinkcard-cc mastercard"for="mastercard"></label>
    </div>
    
    
</form>
<small><a href="https://github.com/rcotrina94/icons">
    &copy; Icons by <span class="cc">@rcotrina94</span> on <span class="cc">Github </span></a></small>

＆＃13;

Answer 4

当然，如果你改变了id，它将无法工作，因为CSS风格的目标是那些ID＆＃39; s。因此，您必须在所有代码中找到并重命名所有内容才能使其重新运行。

你展示的代码也非常丑陋，充斥着一堆css选择器。如果您不熟悉编码，可能只想尝试不同类型的解决方案。那里有数以百计的人。我个人建议：最小代码=最好。这是jquery的一个。

＆＃13;

$('#sex').html('male');

$("#male").bind("mousedown", function() {
  sex = 'male';
  $('#male').css('opacity','1');
  $('#female').css('opacity','0.2');
  $('#sex').html('male');
});

$("#female").bind("mousedown", function() {
  sex = 'female';
  $('#female').css('opacity','1');
  $('#male').css('opacity','0.2');
  $('#sex').html('female');
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<img id='male' src='http://cliparts.co/cliparts/pT7/KBR/pT7KBR6gc.png' style='width:50px;height:50px'>

<img id='female' src='http://www.clipartbest.com/cliparts/9i4/o7b/9i4o7breT.png' style='width:30px;height:50px;opacity:0.2'>

<div id='sex' style='text-align:center;width:90px;margin-top:10px;font-size:12px;'>
</div>

＆＃13;

如何使用图像而不是单选按钮

4 个答案: