1
入力フィールドの上にラベルをオーバーレイしようとしています。事は、私はフレックスを使用していると同じように動作していないようです。フレックスボックスフォーム内の相対ラベルの位置付け
私はGoogleで解決策を探しましたが、私はフレックスポジションでアイテムを整列させることと関連があると思われますが、ラベルを移動した後で横並びに整列する必要があります。私が必要とするものを理解することが難しくなった場合に備えて、コードを提供しました。
ここでも解決策を探しましたが、私の問題に固有のものは見つかりませんでした。現在、フィールドにオーバーレイしているラベルがありますが、フィールドを並べて並べることはできません。また、小さな画面のラベルの下にフィールドが表示されることに気付く人もいます。
だから、私が明確にしていることを確認するために、私は確信していません。ラベルが入力と重なっているときに、入力フィールドを並べて並べる必要があります。 （ホワイトボードのスケッチ：https://sketchboard.me/dADoYPlJsIfT#/）
/* ---- START RESET ---- */
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
input, select, textarea,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
\t margin: 0;
\t padding: 0;
\t vertical-align: baseline;
\t box-sizing: border-box;
\t font-weight: normal;
\t font-style: normal;
\t border: 0;
\t outline: none;
\t resize: unset;
\t cursor: default; /* 2 */
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
\t display: block;
\t box-sizing: border-box;
}
html {
\t font-size: 62.5%;
\t background-color: #eee;
\t overflow-x: hidden;
}
html, html a {
\t -webkit-font-smoothing: antialiased;
}
body {
\t font-size: 1.6rem;
\t font-family: OpenSansRegular, sans-seriff;
\t color: #333;
\t line-height: 1.25;
}
textarea {
\t -moz-padding-end: 0px;
\t -moz-padding-start: 0px;
}
input,
textarea,
select,
button,
label {
\t font-family: inherit;
\t font-size: inherit;
\t line-height:inherit;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="menu"]::-moz-focus-inner {
\t border: 0;
\t padding: 0;
\t margin: 0;
}
/* ---- END RESET ---- */
input,
textarea,
select,
button,
label,
span {
\t box-sizing: border-box;
\t order: 0;
\t align-self: center;
\t border: 0px solid #333;
}
form {
\t position: relative;
\t display: flex;
\t flex-direction: row;
\t flex-wrap: wrap;
\t justify-content: center;
\t align-content: space-between;
\t align-items: center;
\t width: 80%;
\t margin: auto;
\t padding: 5rem;
border: 1px solid #333;
}
input,
textarea,
select,
button,
label {
\t display: inline-block;
\t flex: 0 0 50%;
border: 1px solid #333;
}
label {
\t z-index: 1;
border: 0px solid #333;
}
input,
textarea,
select,
button,
label {
\t position: relative;
\t padding: .8rem;
}
input[type=text],
input[type=email],
input[type=url],
input[type=tel],
input[type=number],
input[type=date],
select,
textarea {
\t vertical-align: top;
\t top: 0;
\t left: -50%;
}
::placeholder {
\t color: rgba(51, 51, 51, 0);
}
::-webkit-input-placeholder { /* WebKit browsers */
\t color: rgba(51, 51, 51, 0);
}
:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
\t color: rgba(51, 51, 51, 0);
}
::-moz-placeholder { /* Mozilla Firefox 19+ */
\t color: rgba(51, 51, 51, 0);
}
:-ms-input-placeholder { /* Internet Explorer 10+ */
\t color: rgba(51, 51, 51, 0);
}
textarea::-webkit-input-placeholder { /* WebKit browsers */
\t color: rgba(51, 51, 51, 0);
}
textarea:-moz-placeholder { /* Mozilla Firefox 4 to 18 */
\t color: rgba(51, 51, 51, 0);
}
textarea::-moz-placeholder { /* Mozilla Firefox 19+ */
\t color: rgba(51, 51, 51, 0);
}
textarea:-ms-input-placeholder { /* Internet Explorer 10+ */
\t color: rgba(51, 51, 51, 0);
}<h3>Form Name</h3>
<form class="form-horizontal">
\t \t <!-- Text Input-->
\t \t <label for="firstName">First Name</label>
\t \t <input type="text" id="firstName" name="firstName" placeholder="" />
\t \t
<!-- Text Input-->
\t \t <label for="lastName">Last Name</label>
\t \t <input type="text" id="lastName" name="lastName" placeholder="" />
</form>
あなたはなぜフィールド内にラベル名が必要ですか？プレースホルダ属性を使用しないのはなぜですか？ –
ああ、私が終わったら、ラベルは隠れるように滑り落ちます。プレースホルダーのテキストがありますが、透明に設定されます。私はちょうどラベルでいくつかの異なるトランジションを試してみたいです。 – Jaime
ああ、そうだ。彼らが2つの別々の行にあるのは、あなたがラベルの相対位置を使用しているからです。相対的な位置はラベルを移動させますが、まだ移動していない場合は、ラベルを移動します。絶対配置を使用する必要があります。 –