show the text input within a span element, encountering issues with its width

My goal is to create an input text field that looks exactly like a span element. I want the user to be able to enter text without realizing they are typing in a field.

I have made some progress, but the main issue now is with the width of the input field. It appears wider than the text it is intended to replace. Here's the link to see the code in action (you can click on "Texte" to start typing).

Below is the relevant CSS code:

input {
    background-color: transparent;
    padding: 0px;
    border: initial;
    font: inherit;
    margin: 0px;
}

Answer №1

Consider implementing fixed width for the input fields as a potential solution

Check out this demonstration: http://example.com/demo123

You could also experiment with setting the input's width to match that of the accompanying span element

$('span.width').width(); // retrieves the width value

Utilize JavaScript to capture the width of the span and apply it to the input field.

UPDATE: For dynamic resizing based on text length, adjust the size correspondingly.

http://example.com/updateddemo

 var input = $('<input onkeypress=\"this.style.width = ((this.value.length + 1) * 8) + \'px\';\" type=text>');

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

How do I get rid of the form border and shadow on my WordPress login page?

Currently revamping the appearance of the Wordpress login page and most aspects are coming together smoothly. I opted to utilize a separate css file for this project, which has been effective overall. However, one issue persists. I've encountered diff ...

Is there any way to determine if Bootstrap has been utilized to build my WordPress page?

I'm currently contemplating if it's worth incorporating Bootstrap into my pre-existing Wordpress site. During my research, an interesting thought crossed my mind - could the template I'm utilizing already be built with Bootstrap? Although a ...

The Nivo Slider is stealthily concealing my CSS Menu

Although this question has been previously asked, I am still unable to make it work with the solutions provided; The website in question is I have tried changing the z-index on all menu items to 99999, but they are still appearing below. <div id="sli ...

A pair of div containers arranged in rows

I currently have 9 different div containers, each with unique styling for spacing and padding. My goal is to arrange these div cards into 2 rows with sufficient spacing between them for easy readability. As of now, I have all the div containers stacked in ...

Illustration: Fixing a CSS Issue

After implementing Technique #8 from the Nine Techniques for CSS Image Replacement, I am not getting the desired results. Instead of correctly positioned images, the output is not what I anticipated. Here is a link to see for yourself: I made a modificati ...

Shape with smoothed corners

Is there a way to create rectangles with rounded corners using CSS, SVG, or other methods while maintaining straight horizontal and vertical sides? I attempted to use border-radius for the rounded corners, but found that it created curved edges on both ho ...

Struggling to vertically align elements within iron-pages

Struggling to vertically center the content within iron-pages (nested in a paper-drawer-panel). Check out the code snippet below: <paper-drawer-panel id="drawerPanel" responsive-width="1280px"> <div class="nav" drawer> <!-- Nav Conte ...

Attempting to replicate a <textarea> to behave like a <div> element

I am currently facing an issue with my HTML and CSS code. I have tried to construct a design using a <div> but it resulted in horizontal scrolling and looked chaotic. How can I make the CSS and HTML look the same without any issues? <textarea c ...

The container-fluid class expands to full width of the page, except for the navbar

Hey there, looking for some help with your CSS design? Let's take a look at your code snippet: .container-fluid-1 { padding: 0; } .navbar { ...

Implement dynamic CSS color selection based on server-side data

Introduction At our company, we manage a large client website in Optimizely (ASP.NET MVC) that hosts multiple smaller sites for different regions and important customers. Currently, our frontend team creates various themes using SASS to CSS conversion, w ...

Utilizing jinja2 to showcase images within a template's CSS

Working on a flask project, I've integrated a visually appealing front-end design from codepen.io into my HTML template using BeautifulSoup. The design can be found here. I have a list of images obtained through web scraping that I want to display in ...

Are the navigation arrows for moving to the previous and next month not displaying in the vue-bootstrap-datetimepicker component?

I have been utilizing this date picker, and it is functioning correctly. However, it seems to lack some CSS styling. Despite numerous attempts to implement the missing CSS code, I have not been successful. Below is the relevant section of my current code: ...

What is the best way to ensure an element stops at the edge of its container?

I am trying to create a stylish slanted sidebar that aligns perfectly with the red section of my webpage, without overlapping into the blue area. Can anyone guide me on how to achieve this? Even though my current code doesn't seem to work here, it fu ...

Issue with Firefox causing Bootstrap form to appear incorrectly

I recently created a customized form using Bootstrap, but unfortunately, I'm encountering an issue with Firefox. Despite functioning perfectly on other browsers, the radio buttons are being pushed off the edge of the page and aren't displaying pr ...

What is the best way to apply a class to the 'td' element for two specific columns?

I have a rendered row from a database echo "<table border='1' cellpadding='10'>"; echo "<tr> <th>ID</th> <th>First Name</th> <th>Last Name</th> <th></th> <th></th> ...

How do I make the YouTube Grid Gallery player show up in a pop-up window?

I have been experimenting with the following code: <head> <script type="text/javascript" src="http://swfobject.googlecode.com/svn/trunk/swfobject/swfobject.js"></script> <script type="text/javascript"> function loadVideo(playerUrl, ...

Decrease the border-radius shorthand mixin, deactivate the variable

I have been working on creating a mixin for border-radius that will only apply when the values, determined by a variable, are greater than or equal to 0. I have set the default value in a variable as 3px, so if I input -1 or 'no', the border-radi ...

What steps should I take to resolve this animation issue?

My objective with this card animation is for the cards to expand in size when hovered over. Unfortunately, the current issue is that when one card is hovered over, all the other cards also expand, which is not the intended behavior. I am seeking a solution ...

When the CSS grid is equipped with a sticky left column, it will horizontally scroll if the grid's width exceeds 100% of its containing element

I am facing an issue with a CSS grid layout that has sticky left and right columns as shown below: .grid { display: grid; grid-template-columns: repeat(10, 200px); } .grid > div { border: 1px solid black; background-color: white; } .sticky- ...

Issue encountered while attempting to implement custom fonts through CSS

When attempting to implement a custom font on my website using the CSS file, I am having trouble getting it to display correctly. Instead of seeing the desired font, only the default font is showing up. Can someone please review the CSS code below and le ...