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

Ways to extend the default hover duration for the <a> title attribute (tooltip)

Is there a method to extend the length of time that a tool tip appears when using the title attribute in an HTML tag? In Internet Explorer, it seems to vanish after only around 5 seconds. Is there a way to make it last longer? ...

htmltooltiphover

Enhance your React project by incorporating Material-UI card media elements with the ability to add

I am trying to figure out how to create an opaque colored overlay on top of an image using Material-UI. While it is possible with plain HTML, CSS, and JavaScript, I am facing some challenges with Material-UI. <Card> <CardMedia> <im ...

javascripthtmlcssreactjsmaterial-ui

Optimize the layout with Grid CSS to allow the last two items to dynamically occupy

I've been working on a layout that looks like this: X X X X X X X X A B Currently, I have used grid-template-columns: repeat(4, 1fr); to define the columns. However, what I actually want is for the last two items to take up the full width of the rem ...

csscss-grid

Navigating through cpanel to interact with a Button using Selenium in Python

Unable to select the new folder option. Here is what I have attempted: driver.find_element_by_id("li.action-newfolder") driver.find_element_by_xpath("//[a(text(), 'New Folder')]").click() Unfortunately, neither of these methods are successful. ...

pythonhtmlselenium

What steps can be taken to deter users from bookmarking URLs?

On my website, the webpages are dynamically generated using the GET method to fetch variables from a specified URL. For instance, consider the code on the main page: index.php <p><a href="/dynamic.php?name1=value1&amp;name2=value2">next p ...

phphtmlformsurlget

Having trouble with the display of styles on Material UI Cards?

I am currently attempting to customize the default Material UI classes by using useStyles and applying a classname of titleSection. My goal is to make the titleSection bold and in Roboto font, but unfortunately, those styles are not being applied. Below i ...

cssreactjsmaterial-uistyling

Angular: Maximizing Input and Output

I'm having trouble with the function displaying within the input field. My goal is to simply allow the user to enter a name and have it displayed back to them. HTML: <div ng-app = "mainApp" ng-controller = "studentController"> <tr> < ...

javascripthtmlangularjsinputoutput

Ensure that the URL is updated correctly as the client navigates between pages within a Single Page Application

Seeking a solution for maintaining the URL in a Single Page application as the client navigates between pages, with the URL changing in the background. I attempted using @routeProvider but it doesn't seem to be suitable for my situation. Any suggestio ...

angularjshtmlcssurl

Show or hide a Div based on radio button selection problem

I've successfully implemented a Div visibility toggle using the code below: $('input[name="type"]').on('change', function() { var show = $(this).val(); $(".typechoice").hide(); $("#"+show).show(); }) <script src="h ...

javascriptjqueryhtml

Is there a difference in performance between using multiple inline scripts versus one combined inline script?

Comparing Multiple Inline Scripts to a Single Conjoined Inline Script: <script type="text/javascript">/* some codeblock 1 */</script> <script type="text/javascript">/* some codeblock 2 */</script> <script type="text/javascript"& ...

javascripthtml

Setting the z-index of the parent element causes issues with overlapping

When adjusting the z-index property of the parent element, I am experiencing issues with overlapping elements. Below is the HTML and CSS code: .black_gradient{ width:100%; height:100%; background: linear-gradient(0deg,rgb(75, 75, 75) 20%, rgba(75,75 ...

htmlcssz-indexoverlapping

JavaScript-powered horizontal sliderFeel free to use this unique text

I'm new to JS and trying to create a horizontal slider. Here's the current JS code I have: var slideIndex = 0; slider(); function slider() { var i; var x = document.getElementsByClassName("part"); for (i = 0; i < x.length; i++) { x[i].styl ...

javascripthtmlcssslider

I am interested in creating a class that will produce functions as its instances

Looking to create a TypeScript class with instances that act as functions? More specifically, each function in the class should return an HTMLelement. Here's an example of what I'm aiming for: function generateDiv() { const div = document.crea ...

javascripthtmltypescript

How to conceal table cells on Safari 5?

My code works on Firefox and IE, but not on Safari. Here's an example: <table> <thead> <tr> <th style="display: none;">hi</th> </tr> </thead> <tr class="someClass"> <td style= ...

htmlcsssafari

Applying a filter within an ng-repeat loop to act as a conditional

Is it possible to use the ng-repeat as a conditional in an efficient and optimal way? I am wondering if there is a way for code to be shown only if found selected is true, without having to create a new variable in the back-end. <div ng-repeat="c ...

htmlangularjs

Guide on creating a toggle effect for a div with querySelector and addEventListener

I utilized the email and password divs provided by Bootstrap. The CSS for the id dropdownlogin includes display: none; in this post, I hope that I have shared adequate information. <script> document.addEventListener('DOMContentLoaded', ...

javascripthtmlcss

What is the best method for incorporating a YouTube embedded video into an image carousel using HTML and CSS?

I'm encountering an issue with my product carousel that includes an image and a video. The image displays correctly, but when I attempt to click on the video to have it appear in the main carousel view, it doesn't function as expected. Here is a ...

javascripthtmlcsscarousel

The automated Login Pop Up button appears on its own and does not immediately redirect to the login form

Hey guys, I'm struggling with modifying the jquery and html to ensure that when the login button is clicked, the login form pops up instead of displaying another login button. Another issue I am facing is that the login button seems to pop up automati ...

javascriptjqueryhtmlcss

What is the best way to create a dynamic hyperlink that leads to a detailed information page based on the specific link clicked?

I'm currently working on a web page that displays a list of users, and I want each user's name to be clickable, leading to a page with specific details about that user. I'm new to this field, so I'm unsure where to start. My idea is to ...

javascripthtmlnode.jsmongodbexpress

Instructions on triggering a pop-up modal from a separate HTML document to the index page

I am trying to open a form in a Modal using a button. However, the Modal is located in a separate .html file. How can I use JavaScript to call the form from that external html file into my index.html file? Currently, I am able to call the Modal within the ...

javascriptphphtmlcssbootstrap-modal