HTML、CSSのチェックボックスのラベルの位置がチェックボックスの上にあるようにしてください

良い日に、私はCSSがうまくいかず、チェックボックスのラベルの上にチェックボックスのラベルを配置するのに苦労します。手伝ってくれませんか？ jqueryを使って動的にテキストを変更したいので、ラベルを中央の書式付きテキストにしたい。私がそれをチェックした場合、 "修正"テキストは "固定"になり、このテキストはチェックボックスの上の中央に置かれたままになります。 JSFIDDLE >>>https://jsfiddle.net/koykoys/d2cb96xo/です。HTML、CSSのチェックボックスのラベルの位置がチェックボックスの上にあるようにしてください

**注：「html」部分は変更しないでください。「css」部分のみを変更してください。

ありがとうございます。あなたが実際に（あなたの質問の状態のように）あなたのチェックボックスの上ご<label>要素をしたい、とあなたの代わりに縦にここに他の回答のようなあなたのラベルのテキストを揃えたいと思っていないと仮定すると、

input[type="checkbox"]:not(:checked), 
 
input[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
input[type="checkbox"]:not(:checked) + label, 
 
input[type="checkbox"]:checked + label{ 
 
    position: relative; 
 
    padding-left: 50px; 
 
    cursor: pointer; 
 
} 
 

 

 
/* checkbox aspect */ 
 
input[type="checkbox"]:not(:checked) + label:before, 
 
input[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left:0; top: 2px; 
 
    width: 40px; height: 40px; 
 
    background: #f8f8f8; 
 
    border-radius: 3px; 
 
    border: 2px solid #aaa; 
 
    -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
    box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
} 
 
/* checked mark aspect */ 
 
input[type="checkbox"]:not(:checked) + label:after, 
 
input[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 0; left: 5px; 
 
    font-size: 34px; 
 
    color: green; 
 
    transition: all .2s; 
 
    -webkit-transition: all .2s; 
 
    -moz-transition: all .2s; 
 
    -ms-transition: all .2s; 
 
    -o-transition: all .2s; 
 
} 
 
/* checked mark aspect changes */ 
 
input[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<div class="col-md-12"> 
 
    <input id="checkid" type="checkbox"> 
 
    <label for="checkid">Fixed</label> 
 
</div>

出典

2016-11-24 Rocky

をこれはあなたがラベルに擬似要素を使用しているので、実際には、もはやinput type="checkbox"ある「チェックボックス」（上のラベルを中心に説明しますそれを視覚的に置き換える）。

input[type="checkbox"]:not(:checked), 
 
input[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
input[type="checkbox"]:not(:checked) + label, 
 
input[type="checkbox"]:checked + label{ 
 
    position: relative; 
 
    cursor: pointer; 
 
    display: inline-block; 
 
    padding-bottom: 50px; 
 
} 
 

 

 
/* checkbox aspect */ 
 
input[type="checkbox"]:not(:checked) + label:before, 
 
input[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left:50%; top: 20px; 
 
    width: 40px; height: 40px; 
 
    background: #f8f8f8; 
 
    border-radius: 3px; 
 
    border: 2px solid #aaa; 
 
    -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
    box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
    transform: translateX(-50%); 
 
} 
 
/* checked mark aspect */ 
 
input[type="checkbox"]:not(:checked) + label:after, 
 
input[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 20px; left: 0; 
 
    right: 0; 
 
    font-size: 34px; 
 
    color: green; 
 
    transition: all .2s; 
 
    -webkit-transition: all .2s; 
 
    -moz-transition: all .2s; 
 
    -ms-transition: all .2s; 
 
    -o-transition: all .2s; 
 
    text-align: center; 
 
} 
 
/* checked mark aspect changes */ 
 
input[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<div class="col-md-12"> 
 
    <input id="checkid" type="checkbox"> 
 
    <label for="checkid">Fixed</label> 
 
</div> 
 

 
<div class="col-md-12"> 
 
    <input id="checkid2" type="checkbox"> 
 
    <label for="checkid2">Label can now vary in length</label> 
 
</div>

出典

2016-11-24 10:07:04 connexo

ありがとうございます@connexo、これは私が探しているものです:)私はあなたがcssになると私はあなたの才能になることができることを願っています。 :) – Rocky

擬似要素の設定をtopの属性を100%に設定すると、<label>要素のすぐ下に配置され、次に<label>要素の末尾にmarginという要素を追加して、擬似要素）を設定し、次に<label>~displayをブロックとする。

input[type="checkbox"]:not(:checked), 
 
input[type="checkbox"]:checked { 
 
    position: absolute; 
 
    left: -9999px; 
 
} 
 
input[type="checkbox"]:not(:checked) + label, 
 
input[type="checkbox"]:checked + label{ 
 
    position: relative; 
 
    margin-bottom: 50px; 
 
    padding-bottom: 4px; 
 
    cursor: pointer; 
 
    display: block; 
 
} 
 

 

 
/* checkbox aspect */ 
 
input[type="checkbox"]:not(:checked) + label:before, 
 
input[type="checkbox"]:checked + label:before { 
 
    content: ''; 
 
    position: absolute; 
 
    left:0; top: 100%; 
 
    width: 40px; height: 40px; 
 
    background: #f8f8f8; 
 
    border-radius: 3px; 
 
    border: 2px solid #aaa; 
 
    -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
    box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
} 
 
/* checked mark aspect */ 
 
input[type="checkbox"]:not(:checked) + label:after, 
 
input[type="checkbox"]:checked + label:after { 
 
    content: '✔'; 
 
    position: absolute; 
 
    top: 100%; left: 5px; 
 
    font-size: 34px; 
 
    color: green; 
 
    transition: all .2s; 
 
    -webkit-transition: all .2s; 
 
    -moz-transition: all .2s; 
 
    -ms-transition: all .2s; 
 
    -o-transition: all .2s; 
 
} 
 
/* checked mark aspect changes */ 
 
input[type="checkbox"]:not(:checked) + label:after { 
 
    opacity: 0; 
 
    transform: scale(0); 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
    opacity: 1; 
 
    transform: scale(1); 
 
}

<div class="col-md-12"> 
 
    <input id="checkid" type="checkbox"> 
 
    <label for="checkid">Fixed</label> 
 
</div>

出典

2016-11-24 10:05:55

OPはに関してラベルテキストを中心としたの要件を述べたを追加してはいけませんチェックボックス。 – connexo

@connexo彼らは確かにそうしていたので、私はすでにあなたの答えをアップアップしました。 –

-1

だけ追加します。

input[type="checkbox"]:not(:checked) + label, 
input[type="checkbox"]:checked + label { 
    padding-top: 11px; 
}

出典

2016-11-24 10:06:44 AshishKalosia

単にいくつかのアライメントを行うパディングを削除し、位置

input[type="checkbox"]:not(:checked), input[type="checkbox"]:checked { 
 
\t position: absolute; 
 
\t left: -9999px; 
 
} 
 
input[type="checkbox"]:not(:checked) + label, input[type="checkbox"]:checked + label { 
 
\t position: relative; 
 
\t cursor: pointer; 
 
} 
 
/* checkbox aspect */ 
 
input[type="checkbox"]:not(:checked) + label:before, input[type="checkbox"]:checked + label:before { 
 
\t content: ''; 
 
\t position: absolute; 
 
\t left: 0; 
 
\t top: 22px; 
 
\t width: 40px; 
 
\t height: 40px; 
 
\t background: #f8f8f8; 
 
\t border-radius: 3px; 
 
\t border: 2px solid #aaa; 
 
\t -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
\t box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
 
} 
 
/* checked mark aspect */ 
 
input[type="checkbox"]:not(:checked) + label:after, input[type="checkbox"]:checked + label:after { 
 
\t content: '✔'; 
 
\t position: absolute; 
 
\t top: 16px; 
 
\t left: 10px; 
 
\t font-size: 34px; 
 
\t color: green; 
 
\t transition: all .2s; 
 
\t -webkit-transition: all .2s; 
 
\t -moz-transition: all .2s; 
 
\t -ms-transition: all .2s; 
 
\t -o-transition: all .2s; 
 
} 
 
/* checked mark aspect changes */ 
 
input[type="checkbox"]:not(:checked) + label:after { 
 
\t opacity: 0; 
 
\t transform: scale(0); 
 
} 
 
input[type="checkbox"]:checked + label:after { 
 
\t opacity: 1; 
 
\t transform: scale(1); 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Untitled Document</title> 
 

 
</head> 
 

 
<body> 
 
<div class="col-md-12"> 
 
    <input id="checkid" type="checkbox"> 
 
    <label for="checkid">Fixed</label> 
 
</div> 
 
</body> 
 
</html>

出典

2016-11-24 10:08:36

OPは、チェックボックスに関して、ラベル付きのテキストを中央に置くという要件を述べました。 – connexo

ありがとう、これは本当にいい解決策です:) – Rocky

を調整し、私はダウンボックスを強制しての余地を与えることmargin-top: 50pxを追加しましたラベル。ここには完全なCSSがあります。元のコードを編集しないでください。私はいくつかの行だけを追加しました。私は追加した行にコメントを書いた。

input[type="checkbox"]:not(:checked), 
input[type="checkbox"]:checked { 
    position: absolute; 
    left: -9999px; 
    /* added */ 
    opacity: 0; 
} 
input[type="checkbox"]:not(:checked) + label, 
input[type="checkbox"]:checked + label{ 
    position: relative; 
    padding-left: 50px; 
    cursor: pointer; 
    /* added */ 
    text-align: center; 
    padding-left: 4px; 
} 


/* checkbox aspect */ 
input[type="checkbox"]:not(:checked) + label:before, 
input[type="checkbox"]:checked + label:before { 
    content: ''; 
    position: absolute; 
    left:0; top: 2px; 
    width: 40px; height: 40px; 
    background: #f8f8f8; 
    border-radius: 3px; 
    border: 2px solid #aaa; 
    -webkit-box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
    box-shadow: groove 0 0 13px rgba(0, 0, 0, 0.5); 
    /* added */ 
    margin-top: 20px; 
} 
/* checked mark aspect */ 
input[type="checkbox"]:not(:checked) + label:after, 
input[type="checkbox"]:checked + label:after { 
    content: '✔'; 
    position: absolute; 
    top: 0; left: 5px; 
    font-size: 34px; 
    color: green; 
    transition: all .2s; 
    -webkit-transition: all .2s; 
    -moz-transition: all .2s; 
    -ms-transition: all .2s; 
    -o-transition: all .2s; 
    /* added */ 
    margin-top: 20px; 
} 
/* checked mark aspect changes */ 
input[type="checkbox"]:not(:checked) + label:after { 
    opacity: 0; 
    transform: scale(0); 
} 
input[type="checkbox"]:checked + label:after { 
    opacity: 1; 
    transform: scale(1); 
}

出典

2016-11-24 10:28:12 legitghost

本当にありがとう、助けてくれてありがとう – Rocky

なぜあなたは.......シンプルな何かを試してみてください、あなたのlableonトップを入れて、ちょうど「BR」

<!DOCTYPE html> 
    <html> 
    <body> 

    <form action="demo_form.asp" method="get"><lable>asdf</lable><br> 
    <input type="checkbox" name="vehicle" value="Bike"><br> 

    <input type="submit" value="Submit"> 
    </form> 

    </body> 
    </html>

出典

2016-11-24 10:48:05

あなたが見るチェックボックスは 'input'ではなく' :: before'疑似ラベルの要素。 – connexo

HTML、CSSのチェックボックスのラベルの位置がチェックボックスの上にあるようにしてください

答えて

関連する問題