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

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

javascriptjqueryhtmlcss

Adjust the table cell width to match the width of the ASP image

Below is the ASP image within a table cell: <tr> <td> <asp:Image runat="server" Width="64px" Height="64px" ImageUrl="~/Images/user64.png" /> </td> ...

htmlcssasp.nethtml-tablewebforms

Maximizing CSS opacity for optimal performance in image fading

I'm working on creating a smooth fade in-out effect for the images in my photo gallery by adjusting the CSS opacity value using JavaScript. However, I've noticed that this process is quite sluggish on certain computers, such as my relatively new ...

javascriptcsshtmlcanvas

Learn how to effectively share an image using the Math.random function

Is there a way to display a random number of images on a webpage using JavaScript? Let's say we want to show X number of images, where X is a randomly generated number. For the sake of this example, let's set X to be 10. <input class="randomb ...

javascripthtml

Ways to position an absolute element in the middle of two CSS Grid cells

Is it possible to position an element with position: absolute between two grid cells, where half of the element is on the sidebar and the other half is on the rest of the page? The challenge arises when there is overflow set on both the sidebar and the pag ...

css

Utilizing Ajax to Dynamically Update Link Styles

When using an AJAX request to load a portion of a webpage, the content is delivered by a framework and then inserted into the DOM tree using jQuery. Everything seems to be working well so far. However, I encountered an issue when trying to use background ...

cssajaxhyperlink

Which one has better performance: class or CssClass?

Curious about the efficiency of: <asp:TextBox runat="server" class="someCssClass"></asp:TextBox> as opposed to. <asp:TextBox runat="server" CssClass="someCssClass"></asp:TextBox> I speculate that class is quicker than CssClass s ...

htmlcssasp.net

Delete a product from the cart when the selection in the dropdown changes

In the process of creating an e-commerce platform, I am implementing a feature that allows users to choose items from a dropdown menu based on their category. However, I want to restrict users from adding more than one item per category. If a user tries to ...

phpjqueryajaxhtml

The issue with Cordova (PhoneGap) is that when you move a video file captured by the camera, the gallery thumbnail

Is there a plugin available for Cordova (Android) that can refresh the gallery? I am currently capturing video using the Cordova plugin cordova-plugin-media-capture, which saves the video to the default sdcard path (gallery). After saving the file, I ...

androidjqueryioscordovavideo

React Server Component Warning: Server Functions cannot be invoked during the initial rendering stage

In my project, I have a client component named CampaignTable. This component requires a columns object to render the columns. Within the columns object, I include a server component called CampaignActions. The CampaignActions component is responsible for d ...

javascriptreactjsnext.jsnext.js13

Tips for preventing extra whitespaces and line breaks from being added to the render tree in Blazor applications

Consider the code snippet below <div> @for (int i = 0; i < 10; i++) { <span class="@classes[i]">@i</span> } </div> The desired output is (with each character styled differently) 01234567890 Howev ...

htmlcssrazorblazor

Extracting Raw Body from Stripe Webhook in NextJS

I'm feeling frustrated trying to get a raw body passed for the Stripe webhook in NextJS! Despite trying numerous solutions from various sources, I just can't seem to get it to work. Calling upon the developers with special powers (of which I am ...

javascriptnext.jsstripe-paymentswebhooksserverless-framework

Incompatibility problem with IE

Encountered an issue in Internet Explorer: Error message: Object doesn't support property or method 'block'. The jQuery code I'm using is : showProcessingMessageAndBlockForm: function () { $("#checkoutContentPanel").block({ me ...

jqueryinternet-explorer

What is the best way to showcase the following values using Vue.js?

{"status":true,"data":[{"ref_id":"22","agent_id":"68","p_id":"84","description":"i am interested"},{"ref_id":"24","agent_id":"68","p_id":"84","description":"For more information about Bootstrap and Bootstrap Glyphicons, visit our Bootstrap Tutorial.For mor ...

javascriptphphtmlvue.js

Issues with TypeScript "Compile on save" functionality in Visual Studio 2015

The feature of "Compile on save" is not functioning properly for me since I upgraded to Visual Studio 2015. Even though the status bar at the bottom of the IDE shows Output(s) generated successfully after I make changes to a .ts file and save it, the resul ...

javascriptvisual-studiocompilationtypescriptvisual-studio-2015

What is the significance of using a double arrow function in Javascript?

Can someone explain the double arrow notation used in the code snippet below? How does the second arrow function get executed if the first one's response is true? And in what scenarios is this notation typically used? async check({ commit }) { ...

javascriptvue.jsecmascript-6arrow-functions

Referencing another component in StyledComponents

I'm looking to modify the properties of my parent component's :after selector whenever the child element is focused. It seemed straightforward at first, but for some reason, I just can't seem to make it work. Here's a glimpse of my comp ...

javascriptcssreactjsstyled-components

Is there a way to create a soft light blue backdrop for text using HTML and CSS?

Is there a way to create a light blue background effect behind text using HTML and CSS? You can view the image reference here ...

htmlcssweb

What could be causing my AJAX code to fail in retrieving information from an API?

Hey everyone, I'm new here and hoping to get some help with an issue I'm facing. I've written a code to fetch data from an API and display it on my HTML page, but for some reason the AJAX code isn't working. There's nothing showing ...

javascriptajaxasp.net-web-api

Using jQuery, compare the values of two elements and update the class based on the comparison outcome

My objective is to retrieve data from a database, place it into an <li> element, and then highlight the larger of the two values obtained from these HTML <li> elements. I have created a jsfiddle, but I am uncertain about how to use the addCla ...

javascriptjqueryhtml