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:

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>

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

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.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

The float:left property within a div is not behaving as anticipated

I am having trouble positioning my second div. In order to have 70% of my website for posts and 30% for a small text display, I created a new div. I believe the correct way to position it is by using "float: left" so that the div goes under the banner whe ...

What is the best way to center a Checkbox in HTML5 and CSS?

I've been struggling to center my Checkbox with label on my current website project. Despite searching online for solutions, I'm still unable to find the right method! If you're curious, you can check out the source code of my webpage at ( ...

Excess space creating horizontal and vertical scrolling issues on an HTML webpage

Currently, I am experimenting with CSS effects. In my code, I have included div elements to display balls on the document body, each with random sizes and colors. However, an unexpected issue has arisen - excess scroll space is being generated due to the c ...

The text in the <p> tag will remain the same color

I am encountering an issue with changing the color in the <p> tags within the code snippet below. Specifically, I am trying to change the TITLE text to gray but have been unsuccessful so far. If anyone could provide assistance on this matter, it wou ...

When attempting to transfer data from an Ajax HTML form to a Flask template in Python upon clicking a button, encountered difficulties

I am a beginner with Flask and HTML. I need some help as I am struggling to retrieve parameter values from the HTML form (index1.html). Here is my HTML code: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF ...

I require assistance in troubleshooting and repairing my HTML and JavaScript code

I am working on creating a feature where users can input their upcoming birthday date and receive an alert showing how many days are left until then. However, I encountered an issue where the alert displays NaN (Not a Number) before the birthday is entered ...

Styling with CSS: Enhancing list items with separators

Is there a way to include a separator image in my list using CSS? li { list-style: none; background-image: url("SlicingImage/button_unselect.png"); height: 53px; width: 180px; } This is the code for the separator image: url("SlicingImage ...

Is there a way to create an <a> element so that clicking on it does not update the URL in the address bar?

Within my JSP, there is an anchor tag that looks like this: <a href="patient/tools.do?Id=<%=mp.get("FROM_RANGE") %>"> <%= mp.get("DESCRITPION") %></a>. Whenever I click on the anchor tag, the URL appears in the Address bar. How can ...

The Unit Test for Angular NgRx is not passing as expected

I'm facing difficulties with my unit tests failing. How can I verify that my asynchronous condition is met after a store dispatch? There are 3 specific checks I want to perform: 1/ Ensure that my component is truthy after the dispatch (when the cond ...

Browser does not support the Media Query

I'm completely puzzled by Media Queries. I've been attempting to resolve this issue but cannot seem to identify where the problem lies. While creating a website with Wordpress, my header.php contains the following line: <meta name="viewpo ...

The div element nested within the button is not visible

Fiddle I am trying to create a unique social button design that resembles the custom Google+ sign-in button: However, I encountered an issue where the second div element (to hold the right part of the button) is not displaying as expected: Here is the c ...

"Capturing the essence of your online presence: The

I recently completed a website for my Students Organization, which includes a special page dedicated to recognizing the individuals who helped organize our activities. Each member is represented with a photo on this page, sourced from their Facebook profil ...

Setting column heights and spacing in Bootstrap

I'm looking to dynamically populate the blocks. Essentially, a for loop would be used to pass the data. However, I'm facing some challenges with the height of the blocks at different screen sizes while utilizing bootstrap 4. My goal is to have th ...

Implement jQuery Tabs in Brackets software to enhance user experience

My Adobe Creative Cloud subscription is expiring soon, and I am considering switching to Brackets, an open-source code editor developed by Adobe. However, I am facing some difficulties adding jQuery tabs to my HTML documents. I downloaded the 1.10.4 zip f ...

What is the best approach to reverse the selection of <li> elements by utilizing :not() and :contains

I am looking to implement a live search feature using jQuery. Below is the code snippet I have written: $("#searchInput").on("keyup", function () { var searchTerm = $("#searchInput").val(); $('li:contains("' + searchTerm + ' ...

Tips for using the foreach loop to print out multiple arrays

I am working with two arrays in PHP: post_titles and posts. I need to figure out how to print them sequentially using a foreach loop. Printing one array at a time is not an issue, as shown below: <?php foreach ($titles as $row) { ?> <?php ec ...

Can Angular components be used to replace a segment of a string?

Looking to integrate a tag system in Angular similar to Instagram or Twitter. Unsure of the correct approach for this task. Consider a string like: Hello #xyz how are you doing?. I aim to replace #xyz with <tag-component [input]="xyz">&l ...

Unable to extract information from empty <td> using python and selenium

Currently, I am facing an issue while trying to fetch values from a <tr> using Python Selenium. Specifically, I need these values to be ordered and also identified based on whether they contain the word "PICK" or not. My goal is to determine the exa ...

Having trouble deciphering mathematical formulas while editing content on ckeditor

While using math formulas in CKEditor, I noticed that when I insert new content via textarea, the formulas are displayed correctly. However, when I go back to edit the content, the text formulas do not display as before. This is the source code I am using ...

Using Selenium's findElement method along with By.cssSelector to locate elements with multiple classes

I'm a beginner with selenium. Can someone explain how to locate an element that has multiple classes and values? <div class="md-tile-text--primary md-text">Getting Started</div> using the findElement method By .css Selector. ...