Is it possible to position my label above my text box input?

Question

Is it possible to position my label above my text box input?

Having trouble aligning the checkbox label with the edge of the text area in my login form code. It always ends up on the right side, outside of the div container when inspected.

I've attempted setting a left value for the label, but it causes issues when the screen size changes.

Desired layout:

https://i.sstatic.net/9xSMH.png

Link to JSFiddle for reference

function showHidePassword() {
  var x = document.getElementById("pass");
  if (x.type === "password") {
    x.type = "text";
  } else {
    x.type = "password";
  }
}

<!--CSS CODE HERE-->

<form>
            <!-- FORM HTML HERE -->
        </form>

html css

Answer 1

Answer №1

To ensure that the checkbox is contained within the text input, you can enclose both fields in a wrapper with a class of relative, and then use absolute positioning for the checkbox.

Here's an example:

https://jsfiddle.net/x0o46g7a/2/

.wrapper {
  position: relative;
}

.text {
  width: 100%;
  height: 100%;
}

.checkbox {
  position: absolute;
  top: -8px;
  right: -8px;
}

Keep in mind:

It's recommended to add some padding-right to your text input to prevent any overlap or underlap with the absolutely positioned checkbox.

Answer 2

To ensure that the checkbox is contained within the text input, you can enclose both fields in a wrapper with a class of relative, and then use absolute positioning for the checkbox.

Here's an example:

https://jsfiddle.net/x0o46g7a/2/

.wrapper {
  position: relative;
}

.text {
  width: 100%;
  height: 100%;
}

.checkbox {
  position: absolute;
  top: -8px;
  right: -8px;
}

Keep in mind:

It's recommended to add some padding-right to your text input to prevent any overlap or underlap with the absolutely positioned checkbox.

Answer 3

Answer №2

If you're working with the provided code, make sure to include the following style rules in your CSS file:

float: right for .col-75 rather than using float left
right: 0 for .col-75 label

By implementing these changes, you can ensure that the checkbox stays within the input field.

Answer 4

If you're working with the provided code, make sure to include the following style rules in your CSS file:

float: right for .col-75 rather than using float left
right: 0 for .col-75 label

By implementing these changes, you can ensure that the checkbox stays within the input field.

Is it possible to position my label above my text box input?

Answer №1

Answer №2

Similar questions

The code, which is the same, placed in a different location on another page - fails to function

flexbox layout with a fixed sidebar that stays in place

Could there be an issue with my website's bootstrap where badges are not being applied properly?

Overlap with upper picture formatting

Using the Firefox API to determine if a tab is currently active

Hover effects in CSS animations can be hit or miss, with some working smoothly while others may

Final div class nested within the HTML and styled with CSS

Using data-image as the source for Bootstrap Modal

Slide your cursor over to reveal a picture

Enhance your CSS link in Yii framework 2.0 by incorporating media printing capabilities

Tips for incorporating a simple jQuery table

Trouble with CSS styling arising when launching the MVC application on IIS

Preloading and rendering an image onto a canvas in a Vue single-page application is not functioning as expected

When a div is modified through an ajax function, I aim to activate a JavaScript function

Ensure that the heights of columns in UL CSS are aligned regardless of the number of lines they contain

What is the process for implementing hover transitions on link elements?

What is the trick to have a CSS element overflow the boundaries of its containing div entirely?

Show all entries belonging to a specific ID on individual rows for each ID using PHP

Is there a way for me to recreate the appearance of the outline and labeling found in Material-UI's outlined textfield?

The KeyboardAvoidingView disrupts the structure of the flexbox layout