Eliminating the Skewed Appearance of Text in Input Fields Using CSS

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Customized Page Layout</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Eraser&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Eraser', sans-serif;
        }

        /* Adjust button style */
        .rounded-none {
            border-radius: 0;
        }

        /* Adjust skew for all divs */
        .skew-div {
            transform: skewX(-40deg);
        }

        /* Counteract skew for text */
        .skew-text {
            transform: skewX(40deg);
        }

        /* Adjust skew for text in input fields */
        input.skew-text {
            transform: skewX(0deg);
        }
        


        /* Skew the button */
        .skew-button {
            transform: skewX(-40deg); /* Adjust the skew angle as needed */
        }

        /* Counter-skew the text inside the button */
        .skew-button .unskew-text {
            display: block; /* Make span behave like a block element to center the text correctly */
            transform: skewX(40deg); /* Apply the opposite skew transformation */
        }

    </style>
</head>

<body class="bg-gray-800 text-white">
    <div class="max-w-2xl mx-auto py-10">

        <div class="text-center text-2xl font-bold mb-6">Page Layout Options</div>
        <div class="grid gap-2"> <!-- Reduce spacing between divs -->
            <!-- Section 1 -->
            <div class="grid grid-cols-2 gap-2"> <!-- Reduce spacing between divs -->
                <!-- Columns -->
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> <!-- Add skew-div class -->
                    <div class="flex-1 flex items-center"> <!-- Adjusted to take up half width -->
                        <span class="skew-text text-black">Columns</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>

                <!-- Rows -->
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> <!-- Add skew-div class -->
                    <div class="flex-1 flex items-center"> <!-- Adjusted to take up half width -->
                        <span class="skew-text text-black">Rows</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>
            </div>
            <!-- Section 2 -->
            <div class="grid grid-cols-2 gap-2"> <!-- Reduce spacing between divs -->
                <!-- Tile Height -->
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> <!-- Add skew-div class -->
                    <div class="flex-1 flex items-center"> <!-- Adjusted to take up half width -->
                        <span class="skew-text text-black">Tile Height</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>
                <!-- Tile Width -->
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> <!-- Add skew-div class -->
                    <div class="flex-1 flex items-center"> <!-- Adjusted to take up half width -->
                        <span class="skew-text text-black">Tile Width</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>
            </div>
            <!-- Password -->
            <div class="grid grid-cols-2 gap-2">
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> <!-- Add skew-div class -->
                    <div class="flex-1 flex items-center"> <!-- Adjusted to take up half width -->
                        <span class="skew-text text-black">Password</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>
            </div>
           <!-- Other Sections Omitted for Brevity -->

            
        </div>
    </div>
</body>

</html>

In working on a customized webpage layout that incorporates a unique visual design using CSS skewed div elements, I encountered an issue with text alignment within <input> elements contained within these skewed divs. Although I attempted to adjust the skew effect specifically for the text inside the inputs by applying transform: skewX(0deg);, the text still appeared skewed.

Question:

What alternative CSS technique or property could be utilized to eliminate the skew effect from the text inside the input fields while maintaining the desired skew effect on the surrounding div elements? Is there a more effective solution to achieve this specific styling requirement?

javascripthtmljquerycss

Answer №1

Consider using a 40deg angle instead of 0deg:

input.skew-text {
    transform: skewX(40deg);
}

Unfortunately, if you're looking to only target the text and not affect the edges of the input field, it seems like that might not be achievable at this moment.
I hope this helps resolve your issue! :)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Settings Page</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://fonts.googleapis.com/css2?family=Eraser&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Eraser', sans-serif;
        }

        /* Adjust button style */
        .rounded-none {
            border-radius: 0;
        }

        /* Skew all divs */
        .skew-div {
            transform: skewX(-40deg);
        }

        /* Reverse skew for text */
        .skew-text {
            transform: skewX(40deg);
        }

        /* Apply skew to text within input fields */
        input.skew-text {
            transform: skewX(40deg);
        }
        


        /* Skew the button */
        .skew-button {
            transform: skewX(-40deg); /* Adjust as needed */
        }

        /* Counteract skew for text inside buttons */
        .unskew-text {
            display: block; 
            transform: skewX(40deg); 
        }

    </style>
</head>

<body class="bg-gray-800 text-white">
    <div class="max-w-2xl mx-auto py-10">

        <div class="text-center text-2xl font-bold mb-6">Settings</div>
        <div class="grid gap-2"> 
            <div class="grid grid-cols-2 gap-2"> 
                <div class="flex justify-between items-center bg-blue-500 px-4 skew-div rounded-none" style="height: 30px;"> 
                    <div class="flex-1 flex items-center"> 
                        <span class="skew-text text-black">Columns</span>
                    </div>
                    <input type="number" value="10" class="w-16 bg-blue-300 text-black rounded border border-gray-600 focus:border-blue-500 focus:ring focus:ring-blue-300 focus:ring-opacity-50 skew-text text-center" style="width:50%;" />
                </div>

                
            </div>
            
            <div class="grid grid-cols-2 gap-2"> 
            
                
            </div>
            
            

            
        </div>
    </div>
</body>

</html>

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

.value not showing correct data in JavaScript

I am attempting to retrieve the value entered by the user in an HTML input field. While I can display a fixed, predetermined value with ease, this is not my intention. My goal is for users to input a numerical value and for that value to be displayed/adj ...

javascripthtml

Is there a way to automatically scroll the parent page's top when the user navigates within an iframe?

We are encountering an issue with the loading of the iFrame. When the iFrame loads on the client's page, we notice that the page location jumps around and, in most cases, the page focus is lower down the page. This requires users to scroll up to view ...

javascriptjqueryangularjsiframecross-domain

Transfer a script from a view to application.js in Rails: Guide and Instructions

After conducting some research, I found a code that worked well for me in the view. However, I am looking to transfer it to application.js so that I can utilize it in various forms. Another issue I encountered is having two scripts performing the same fun ...

javascriptjqueryruby-on-rails

Tips for handling null input values when saving to a database

<!DOCTYPE html> <html> <head> <title>Data</title> </head> <body> /* Enter your data here */ <form action="this.php" method="post"> <input type='text&a ...

phphtmlcssmysqldatabase

How to achieve smooth transitions in CSS3 with dynamic height changes?

Currently, I am in the process of designing a unique layout. The main challenge lies in toggling between two classes for a div element, one of which has a height of 0px. To achieve this, I have successfully utilized CSS3 animations that effectively scale t ...

jqueryhtmlcss

fetch the image data from the clipboard

Hey there! Is it possible to use JavaScript to retrieve an image from the system clipboard (Windows/Mac) and paste it into a website? ...

javascript

Creating a dynamic interaction between HTML forms and JavaScript using the onsubmit event handler

Having trouble getting my JavaScript file to fire when clicking the submit button on my simple HTML form. Can anyone provide some assistance? **UPDATED CODES Here is a snippet of my condensed HTML file: <html> <form name="form01" id="form01" ac ...

javascripthtml

Creating a mandatory and meaningful text input in Angular 2 is essential for a

I am trying to ensure that a text material input in my app is mandatory, with a message like "Please enter issue description." However, I have noticed that users can bypass this by entering spaces or meaningless characters like "xxx." Is there an npm pac ...

javascriptc#asp.netangulartypescript

What is the best way to add a media query to a <style> element?

I have implemented Skrollr for my Parallax animations, allowing me to use Parallax keyframes without writing them inline. To make the plugin utilize external stylesheets for the keyframes, it uses AJAX to locate the stylesheets imported via <link>. ...

jquerycssajaximportcss-animations

Explore the capabilities of Chart JS integration using Python Selenium

I've been attempting to click the buttons on this Chart JS located on the webpage . Despite trying by xpath, full xpath, and JS path, I have not been successful. An example of my attempt to press the "All" button can be seen below: Thank you! from se ...

javascriptpythonselenium-webdriverhighcharts

Retrieve information from a local API using Next.js

While working with Next.js api today, I encountered an issue. I needed to fetch data from my internal API in getStaticProps. However, the documentation advises against fetching local API directly in getStaticProps and instead suggests importing the functio ...

javascriptreactjsnext.js

Is there a way to resolve this issue? (An error occurred: TypeError - res.json is not a valid function)

When attempting to add an object to my MongoDB database const response = await fetch("/api/contact", { method: "POST", body: JSON.stringify(data), headers: { "Content-Type": "application/json", }, }); I encounter the error message ...

javascriptreactjsmongodbmongoosenext.js

Having trouble integrating a custom button into the toolbar of the Tinymce Vue.js wrapper

Struggling to add a custom button to the toolbar of tinymce using the vue.js wrapper (utilizing vue 3 and tinymce 5). The problem is that the custom button is not appearing in the toolbar. I have attempted the following steps, the logs in the init and set ...

javascriptvue.jsvuejs3tinymce

Creating a Standard DIV Element (JavaScript Code)

Just a quick question here. http://jsfiddle.net/fkling/TpF24/ In this given example, I am looking to have < div>Bar 1</div> open as default... Any suggestions on achieving that? That would be all for now. Thank you so much! :D The JS script: var ...

javascriptcss

Bringing in SCSS using Typescript, React, and Webpack

I am trying to utilize .scss classes by importing them and applying them to the className property of a React component. Here is the structure of my project : root/ ... config/ ... webpack.config.js src/ ... global.d.ts app/ ...

javascriptreactjstypescriptwebpacksass

Parsing JSON or eliminating double quotation marks in data acquired from a model or database within the Rails framework

foo.html.erb <script type="text/javascript"> var all_user_data = <%= @user.all_user_bar_chart.to_json.html_safe) %>; </script> abc.js $(function () { if ($("#foo").length > 0){ var user_charts = new Highcharts.Chart({ ...

javascriptruby-on-railsjsonhighcharts

Utilizing Conditional Statements in the @artsy/fresnel Framework

I recently started working on a responsive React application using the @artsy/fresnel npm package. Below is a snippet of the code I have implemented: <Media greaterThanOrEqual='computer'> <div style={{ padding: '20px 50px' ...

javascriptreactjs

Struggling to delete event listeners in TypeScript using object-oriented programming with JavaScript

After researching the issue, I have discovered that the onMouseUp event is being fired but it is not removing the EventListeners. Many individuals facing a similar problem fail to remove the same function they added initially. Upon reading information fr ...

javascriptoopdrag-and-droptypescript

Centering "Label - Value" without tables in web design

It's common to have multiple labels (such as name, age, color) and a corresponding value for each one. One way to ensure that the values (for example Steve, 19, Red) all start in the same horizontal position is by organizing them in a 2 column, 3 row ...

htmlcsstabular

Add a text to the values in a column of a table when the IDs are the same

I am working on a project that involves updating a table based on a data change. The table has a column for ID and when the ID matches a specific variable, I need to append the word 'Updated!' next to it in the table cell. However, the code I hav ...

javascriptjquery