0
좋아요, 버튼이있어 내가 왜 도심에서 그 중심을 잡고 있는지 알 수 없습니다. 내 첫 번째 의심은 CSS에 있었지만, 사용/변경된 align 또는 position의 어떤 종류도 작동하지 않았습니다.CSS 버튼이 불명확하게 중첩되어 있습니다.
여기 html과 css가 있습니다. 아마 내가 찾는 것보다 빨리 찾을 수있을거야. (사람이 관심이 있다면 또한 여기에 jsfiddle 링크는 다음과 같습니다 http://jsfiddle.net/takkun/63uktgyo/) 수평 중심의 효과가
/* ROUNDED ONE */
.Gcheckbox {
/*CHANGES GRAY SQUARE DIMENSIONS*/
\t width: 16px;
\t height: 33px;
\t background: #ff0000;
\t
\t /*GRAY SQUARE BACKGROUND FADER*/
\t background: linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
\t background: -webkit-linear-gradient(top, 0000ff 100%, 0000ff 0%, #ff0000 0%);
\t background: -moz-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
\t background: -o-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
\t background: -ms-linear-gradient(top, #000000 100%, 0000ff 0%, #ff0000 0%);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fcfff4', endColorstr='#b3bead',GradientType=0);
\t margin: 0px auto;
\t
\t position: relative;
}
.Gcheckbox label {
\t cursor: pointer;
\t position: absolute;
\t width: 10px;
\t height: 10px;
/*MAKES THE GREEN CIRCLE A CIRCLE*/
\t -webkit-border-radius: 10px;
\t -moz-border-radius: 10px;
\t border-radius: 10px;
/********************************/
\t left: 3px;
\t top: 11.25px;
\t box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
\t -webkit-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
\t -moz-box-shadow: inset 0px 0px 0px rgba(239,239,238,1), 0px 0px 0px rgba(239,239,238,1);
\t /*BEHIND GREEN CIRCLE BACKGROUND*/
\t background: -webkit-linear-gradient(top, #0000ff 0%, #0000ff 100%);
\t background: -moz-linear-gradient(top, #0000ff 0%, #0000ff 100%);
\t background: -o-linear-gradient(top, #0000ff 0%, #0000ff 100%);
\t background: -ms-linear-gradient(top, #0000ff 0%, #0000ff 100%);
\t background: linear-gradient(top, #0000ff 0%, #0000ff 100%);
\t filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#0000ff', endColorstr='#0000ff',GradientType=1);
}
.Gcheckbox label:after {
\t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
\t filter: alpha(opacity=0);
\t opacity: 0;
\t content: '';
\t position: absolute;
\t width: 10px;
\t height: 10px;
\t background: #00bf00;
\t background: linear-gradient(top, #00ff00 0%, #00ff00 100%);
\t background: -webkit-linear-gradient(top, #00ff00 0%, #00ff00 100%);
\t background: -moz-linear-gradient(top, #00ff00 0%, #00ff00 100%);
\t background: -o-linear-gradient(top, #00ff00 0%, #00ff00 100%);
\t background: -ms-linear-gradient(top, #00ff00 0%, #00ff00 100%);
\t -webkit-border-radius: 5px;
\t -moz-border-radius: 5px;
\t border-radius: 5px;
\t bottom: 0px;
\t right: 0px;
\t -webkit-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
\t -moz-box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
\t box-shadow: inset 0px 0px 0px #00ff00, 0px 0px 0px rgba(42,171,43);
}
/*CHANGE HOVER EFFECT OPACITY*/
.Gcheckbox label:hover::after {
\t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
\t filter: alpha(opacity=30);
\t opacity: 0.3;
}
.Gcheckbox input[type=checkbox]:checked + label:after {
\t -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
\t filter: alpha(opacity=100);
\t opacity: 1;
}
input[type=checkbox] {
\t visibility:hidden;
}<!DOCTYPE HTML>
<html>
<head>
\t <link rel="stylesheet" href="styleCIRCLE.css" type="text/css">
\t <title>custom checkbox testing</title>
</head>
<body>
<!--styleCIRCLE -->
<div class="Gcheckbox">
\t \t <input type="checkbox" value="None" id="Gcheckbox" name="check" />
\t \t \t <label for="Gcheckbox"></label>
\t \t </div>
\t \t
</body>
</html>
오 세상에 나는 너무 바보 같고 사랑합니다. 고맙습니다. – bonzo
걱정할 필요가 없습니다. 너무 많은 코드 조각을 볼 때 조금 잃어 버릴 수 있습니다. –