Making a readonly input appear like a div using css

Is there a way to style a readonly input to look like a block level element while maintaining its automatic width adjustment? Setting the width to 100% is not the desired solution.

Here is the CSS code that I have tried:

input:read-only, textarea:read-only {
    border: 0;
    outline:0;
    height: auto;
    text-indent: 0;
    width: auto;
    margin-left: 10px;
    float: left;
    margin-bottom: 7px;
    font-weight: 300;
    display:block;
}

My goal is to make the input field behave like the following HTML structure:

<div>
    <a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="9deef2f0f8f2f3f8ddeef2f0f8f1f2f3faf9f2f0fcf4f3fff8fefce8eef8eaf5e4f3f2e9b3fef2f0">[email protected]</a>
</div>

There seems to be an issue with the input field's default width, which affects how it is displayed. I have also tried using the overflow property without success.

I prefer to find a CSS-only solution for this and avoid using JavaScript.

For an updated demonstration, you can view it here: http://jsfiddle.net/hhz17uww/6/

htmlcss

Answer №1

To ensure that the input element fills the width of its container without being affected by any parent margin or padding, you can apply the following CSS:

input:read-only {
  box-sizing: border-box;
  width: 100%;
}

By setting the box-sizing property to border-box, the input element will adjust its width to include the padding and margin of its parent element.

For further details on box-sizing, refer to Paul Irish's article box-sizing border-box ftw

Answer №2

Follow this guideline to successfully complete your assignment.

The inherit CSS-value instructs the element to take the computed property value from its parent element. It is applicable to all CSS properties. When dealing with inherited properties, this reinforces the default behavior and is used to override another rule.

<div class="wrapper">
<input type="email" name="email" class="emailField"  readonly="readonly" value="<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="8efde1e3ebe1e0ebcefde1e3ebe2e1e0e9eae1e3efe7e0ecebedeffbfdebf9e6f7e0e1faa0ede1e3">[email protected]</a>" />
</div>
<p><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="e695898b83898883a695898b838a89888182898b878f8884838587939583918e9f888992c885898b">[email protected]</a></p>


input:read-only {
    border: 0;
    width: inherit;
    display:block;
    margin: 1.12em 0 ;
  font-size: 100%;
    font: inherit;
}

This will adapt the width of the Parent element<div>, but customization may be required for specific needs.

View the Live Demo Here

Answer №3

It seems like the styles are not taking effect because you have utilized a pseudo selector that is not valid: :read-only. Consider using a different selector such as a classname. Check out the updated example below which uses .emailField instead.

http://jsfiddle.net/hhz17uww/4/

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 to place an image in the bottom right corner using CSS

Does anyone know how to position an image in the bottom right corner of a div? I have tried using margin-right and padding-right with 0px on the img tag, but it does not seem to work. The black lines indicate that I do not need that space Here is my Cod ...

htmlcss

Creating a Custom Class for a Custom Button in TinyMCE 4 Using addButton()

Is there a way to add a custom class to a custom button using the addButton() function in TinyMCE? Here is an example: editor.addButton('keywords', { text: 'Insert Keywords', class: 'MyCoolBtn', ...

javascriptjqueryhtmltinymce-4

Cursor customized image vanishes upon clicking anywhere on the page on a MAC in various web browsers

I am currently trying to set a custom image as the cursor using jQuery in this manner $(document).ready(function(){ $("body").css('cursor','url(http://affordable-glass.com/test/penguinSm.png),auto'); }); While this method works, ...

jqueryhtmlcss

Navigating Through the DOM with Selenium using XPath Axes

Currently, I am developing Selenium tests for a dynamic web page. Within this section of code, I am extracting data from an Excel sheet and verifying if a specific element exists on the webpage. I have annotated the critical part of the code with comments ...

javajavascripthtmlseleniumxpath

Loading dynamic fonts in React MaterialUI

In our web application, each user experiences a unique style with colors, fonts, border widths, and more based on the Material UI JSON theme retrieved from the database upon loading the app. The challenge lies in handling dynamic fonts. What approaches ha ...

cssreactjsfontsmaterial-uidynamic-content

If the text is a single line, center it. However, do not center the text if it

Can we center align text horizontally if it occupies a single line, but refrain from center aligning and use white-space: normal when the text spans multiple lines (ideally without the need for JavaScript)? ...

htmlcss

Create a Boostrap navbar with a form and links aligned to the right using the navbar

I'm trying to use navbar-right on a navbar-form and a navbar-nav, but the form ends up on one row and the nav links on another row on the right. How can I make the navbar display the brand on the left and have a search field followed by nav links on t ...

htmlcsstwitter-bootstrap

The scrollbar located within a table cell is malfunctioning and unresponsive

In a container with a fixed width of 500px, I have a table that contains a cell with potentially long text. To ensure the long text appears on a single line, I set the white-space: nowrap property. However, this causes the table to adjust its size to accom ...

htmlcss

Is there a way to display Bootstrap 4 progress bars next to each other in two distinct columns within a single container?

I am struggling with controlling the positioning of Bootstrap 4 progress bars. It seems that Bootstrap's progress bars are based on Flexbox components, which is causing confusion for me. I have provided an image showcasing my issue here Within my cur ...

htmlcsstwitter-bootstrapbootstrap-4twitter-bootstrap-4-beta

What is the best way to set the width of an inner element as a percentage of the Body's width?

Applying a percentage width to any inner element of a page will typically result in that element taking a percentage of its parent container's width. Is there a way to specify the width of an inner element as a percentage of the overall Body width, r ...

csslayout

"Exploring the world of Reactstrap: A

I am struggling to understand the documentation for Bootstrap and reactstrap as I have never used them before. For example, changing the Navbar color and background opacity has been a challenge because they require reserved keywords to be passed as props, ...

cssreactjsbootstrap-4reactstrap

Vue.js: The v-for directive demonstrates distinct behavior with the utilization of template literals

What is the difference in behavior of v-for when using numbers versus template literals? Consider the following scenario: new Vue({ el: "#app", }) <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script> <div i ...

javascripthtmlvue.jstemplate-literals

React.js onClick does not display the dropdown

Hello, I have a question regarding my navbar icon functionality. When I click on the icon, it is supposed to open a dropdown menu. However, although the div name changes when clicked, the CSS properties remain the same as the initial class. I am unsure w ...

javascriptcssreactjsdropdown

Dynamic background image that fills the entire webpage, adjusts to different screen sizes, and changes randomly

Currently, I am working on designing a web page with a dynamic background image that adjusts responsively in the browser without distortion. The challenge is to randomly select an image from an array using jQuery. Unfortunately, my knowledge of jQuery is ...

javascriptjqueryhtmlcss

Troubleshooting jQuery's issue with dynamically adding input fields

I came across a tutorial (which I tweaked slightly) on this website: code In JSFiddle, everything works perfectly fine with the code. However, when I implemented it on my actual page, it's not functioning as expected. I've been trying to trouble ...

javascriptjqueryhtml

Using JavaScript functions on HTML data loaded by the jQuery.append() method: A guide

Utilizing JSON data, I have successfully generated HTML content representing Questions and Multiple Choice Questions. My next goal is to capture user responses in an array after the submit button is clicked. This involves storing which radio button the use ...

javascriptjqueryhtmlcss

What is the best way to include default text in my HTML input text field?

Is it possible to include uneditable default text within an HTML input field? https://i.stack.imgur.com/eklro.png Below is the current snippet of my HTML code: <input type="text" class="form-control input-sm" name="guardian_officeno" placeholder="Off ...

javascripthtmlcss

Centering text within a dynamic div can help create a visually appealing design

While browsing through various forums, I noticed several questions on stackoverflow that touch upon a similar issue to mine. However, my particular problem is a bit unique, and despite my best efforts, I have not been able to find a solution yet. It's ...

csshtmlalignmentcentertext-alignment

What methods can be used to accomplish this effect using CSS and/or Javascript?

Is there a way to achieve the desired effect using just a single line of text and CSS, instead of multiple heading tags and a CSS class like shown in the image below? Current Code : <h2 class="heading">Hi guys, How can i achieve this effect using j ...

javascripthtmlcssnewline

Make an angularJS PUT request using $http

After selecting a value from the dropdown selection, I am attempting to make a PUT call in AngularJS. Although I have successfully retrieved the value from the selection, I am encountering difficulty in generating the response for the PUT call. Below is t ...

javascripthtmlangularjs