The relationship between elements and text input positioning

I am faced with a unique challenge. As a user types in an input field, I need to display a reset button positioned center right of the input.

I must adhere to the current HTML structure for the label, input, button, and error message and I prefer not to rely on browser support. Does anyone have a creative solution for achieving this? Thank you in advance.

label {
  display: block;
}

.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}

input {
  padding: 10px;
}
<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <input name="coupon" type="text" id="coupon">
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
    <a class="reset">x</a>
  </div>
</div>

htmlcss

Answer №1

Step-by-Step Guide

To maintain the current appearance of certain elements, enclose them in a 

<div style="display: inline-block;position:relative;">
tag. This establishes a positioning context for subsequent element placement. Utilize position: absolute along with the required offsets to position the reset button within and relative to the created wrapper.

Below is an attempt at achieving this, though there may be uncertainties regarding your specific situation.

label {
  display: block;
}

.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}

input {
  padding: 10px;
}

.input-wrapper {
  position: relative;
  display: inline-block;
}
.reset {
  position: absolute;
  right: 3px;
  top: 7px;
}
<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <div class="input-wrapper">
      <input name="coupon" type="text" id="coupon">
      <a class="reset">x</a>
    </div>
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
  </div>
</div>

Answer №2

.form-group {
  position: relative;
}

label {
  display: block;
}

.btn {
  padding: 10px;
  background-color: green;
  color: #fff;
}

input {
  padding: 10px;
}

.reset {
  margin-left: -20px;
  margin-top: 10px;
  position: absolute;
}
<div class="shopping-cart-coupon">
  <div class="form-group">
    <label for="coupon">Coupon</label>
    <input name="coupon" type="text" id="coupon">
    <a class="reset">x</a>
    <a id="" style="" class="btn" href=''>Activate</a>
    <span style="display:block;color:red;">Error message</span>
  </div>
</div>

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

Hover over images with the use of html or css styling

I've been attempting to change an image on my website when I hover over it, but despite looking at various examples, I still can't get it to work. Can someone please help me figure out what I'm doing wrong? Below is the HTML code I'm u ...

htmlcssimagehover

Utilize a button within a form to add additional variables to a URL that already contains variables from a separate form

I operate a website that features a search bar and checkboxes for adding variables to the URL: term = "test" variable1=1 url/search?term=test&variable1=1 After completing the initial search, I have additional forms on the left side of the page with m ...

javascriptjqueryhtmlformscheckbox

Is it possible to load images top to bottom?

Is there a way to make browsers load images from the bottom to the top? Imagine I have an extremely long image that takes 60 seconds to load. The content is designed to be read from bottom to top. Is there any trick I can use to ensure that the image load ...

javascripthtmlcssbrowserimage-loading

Tips for utilizing the setInterval function in javascript to update the background color of the body

Currently, I am tackling a project for my course and I am seeking to modify the body's background color on my website randomly by leveraging the setInterval technique in my JavaScript file. Any suggestions on how to achieve this task? ...

javascripthtml

What are some effective ways to manage repetitive HTML elements like headers and footers in Angular 4?

Within my Angular web project, I find myself using a variety of different headers on multiple pages. Is there a way to streamline this process by coding the header and footer once and having them automatically included in one or more pages? I am looking ...

htmlasp.net-mvcangularrazor

Can Google Charts columns be customized with different colors?

Is it possible to modify the colors of both columns in Google's material column chart? Here is the code I am using for options: var options = { chart: { title: 'Event Posting', subtitle: 'Kairos event p ...

javascripthtmlcsschartsgoogle-visualization

Revise for embedded frame contents

Is it possible to modify the HTML content of an iframe within a webpage? I currently have this code snippet: <iframe src="sample.html"></iframe> I am looking for a way to edit the contents of sample.html without directly altering the HTML co ...

javascripthtmlwysiwyg

Using either Javascript or jQuery, I want to set a value within an if statement

Can I set a value within an if statement, like this: if (a = jQuery("#user > .mask.fix > .a1").css('display') != 'none'){ b = a + 'hello'; //b=jQuery("#user > .mask.fix > .a1").css('display')+&apos ...

javascriptjqueryhtmlfunctionif-statement

How can I show or hide all child elements of a DOM node using JavaScript?

Assume I have a situation where the HTML below is present and I aim to dynamically conceal all the descendants of the 'overlay' div <div id="overlay" class="foo"> <h2 class="title">title</h2> ...

javascripthtmlcss

Assigning the image source to match the image source from a different website using the image ID

Would it be possible to retrieve the URL of an image from a different webpage using its img ID, and then implement it as the image source on your own website? This way, if the image is updated on the original site, it will automatically update on yours as ...

javascriptjqueryhtmlimage

Can Wireframe be applied to a 3D gltf model within an HTML document?

I am currently working on achieving a specific design concept, which can be viewed at the following link: To guide me through this process, I have been following a tutorial available here: While I have successfully implemented the model and created mater ...

htmlthree.jsmodel3dgltf

Tips for designing a responsive element with a repeating border

Desired Design: Create a dotted border on top of each li-element Adjust the size of the dots and spacing between them using CSS or image/SVG manipulation Make the width of the ul responsive for varying border widths Ensure that dots are not partially dis ...

htmlcsssvgborder

Resize the shape of an image's polygon

Is there a way to independently scale a specific polygon of an image on hover? For example, I have a world map and I would like to enlarge a country when hovering over it, then return it to its original size when no longer hovering. I am familiar with us ...

javascriptjqueryhtmlcssimage

Scrolling glitch detected on the Telegram web application

Currently, I am working on building an app with Bubble.io that will be used in the Telegram webapp. However, when I pull down (scrolling up) at the top of the page, Telegram interprets it as a close gesture and attempts to minimize the app window. I would ...

htmltelegramviewport

As I scroll, I hope the texts will stay fixed against the backdrop image

Is it possible to make the #home section fixed to the background while scrolling, including all the texts and buttons? I envision it like having texts embedded in an image. The text is located in the middle left of the page (let's keep this as default ...

htmlcss

Tips for including subjects in JSON data

I am trying to include the subject in JSON data so that I can fetch it using $.each(data.subject). Below is my API code where I am retrieving all the data encoded in JSON format. Any assistance would be greatly appreciated. [{"id":"79","FirstName":"Elon", ...

javascriptphphtmlmysqljson

Tips for aligning three <p> elements side by side using flexbox

I need assistance with aligning three boxes next to each other, each containing an image, header, and text. The issue arises when resizing the browser, causing the content in box 2 and 3 to be positioned higher than box 1. Below is the code I have been us ...

htmlcss

Django is indicating that the path is not reachable

I've been struggling with a seemingly silly issue in my code. I can't figure out why it's not working properly. Here is the directory structure of my Django Project: https://i.sstatic.net/0tVo4.png The HTML file I'm targeting (index.h ...

htmlcssdjango

Arranging the elements in my footer for optimal display

My footer layout expands and the lists in each column become misaligned as I add more links to it. I want to make sure that the lists for each column are aligned horizontally on the same row, with the title of each column also in the same row. levi | ...

htmlcssvue.jsvue-material

Is it possible to notify the user directly from the route or middleware?

In my current setup, I am utilizing a route to verify the validity of a token. If the token is invalid, I redirect the user to the login page. I am considering two options for notifying users when they are being logged out: either through an alert message ...

javascripthtmlnode.jsexpressroutes