Is there a way to apply a webkit transformation to a div without affecting the text inside? I need help with achieving this. Below is my current code:
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top: 25px;
position:relative;
-webkit-transform: skew(-30deg);
}
<div class="main_div">
Dummy Text Here
<input type="field" value="" name="" ></input>
</div>
Easily enhance your HTML structure by adding an additional div and applying transform effects as shown below.
HTML
<div class="main_div">
<div class="normal">
<label>Placeholder Text Here</label>
<input type="text" value="" name="" ></input>
</div>
</div>
CSS
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top:25px;
position:relative;
-webkit-transform: skew(-30deg);
}
.normal {
-webkit-transform: skew(30deg);
}
CSS
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top:25px;
position:relative;
-webkit-transform: skew(-30deg);
}
.main_div > * {
-webkit-transform: skew(30deg);
}
HTML
<div class="main_div">
<div>Placeholder Text Here</div>
<input type="text" value="" name="" ></input>
</div>
To achieve the desired outcome, you should assign distinct styles to both your text and input elements. Additionally, make sure to enclose your text within <p> tags:
<div class="main_div">
<p>Sample Text Here</p>
<input type="text" value="" name="" ></input>
</div>
.main_div {
width:200px;
height:100px;
background:red;
margin-left:55px;
margin-top: 25px;
position:relative;
-webkit-transform: skew(-30deg);
}
p {
width: 100px;
color: black;
font-size: 18px;
}
input{
width: 120px;
margin: 0 auto;
display: block
}
Check out this website where the ordered and unordered lists are not aligned correctly. The ideal alignment would have the bullets (or numbers) left aligned. For instance, the number "1." should be aligned to the left on the same line as the heading "Per ...
What is the best way to adjust font size based on screen resolution so that text remains as a single line when the screen is small? For example: http://prntscr.com/2qa9ze <div class="centerbreaking"> <section id="breaking-news"> <div id ...
I am encountering difficulties in rendering my application.html.erb template as I am receiving the following error message: ActionView::SyntaxErrorInTemplate within ApplicationController#home app/views/layouts/application.HTML.erb:10: syntax error, unexpec ...
Is there a way to customize the width of a container to 1440px while ensuring that the columns are still responsive? My project is built using Bootstrap 4 and SCSS. <div class="container"> <!-- Custom Container Width at 1440px--> ...
Hey, I'm having a bit of trouble with something simple and it's driving me crazy. All I want to do is center the text vertically next to a FontAwesome icon. However, no matter what I try, I just can't seem to get it to work. I've looke ...
Seeking assistance with a seemingly simple question that can help enhance my understanding as I dive into using vue/vuetify for a new front end project. I am starting fresh and utilizing v-app-bar. Below is a snippet from my app.vue file: <template> ...
I've been experimenting with ionic and angular.js, trying to figure out the best way to apply background styles to side menus. I currently have a blurred background image with content boxes placed on top of it. My goal is to keep the background fixed ...
I'm developing a website with Node JS and I want to implement a feature where if the user attempts to navigate to a non-existent page, they are redirected to a "Page Not Found" message before being automatically taken back to the home page after a few ...
I would like the button to expand from the bottom when clicked and collapse back down, instead of behaving like a dropdown. <head> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_ ...
Every time I include a space in the alt tag of my image, it completely distorts the entire <img> line. For example, if my image title is Windows 10, specifically related to today's news. Let's assume my image tag reads Windows 10 officiall ...
I am currently working on a project where I cannot use ng-cloak due to the way the css files are loaded. I have been exploring alternative solutions and have tried a few different approaches. My main goal is to ensure that two icons are never shown at the ...
https://i.stack.imgur.com/Pv2T4.pngI'm having trouble using Google icons in my project. Can anyone help me figure out how to fix this? UPDATE: Here is a snippet of my HTML template: <?xml version="1.0" encoding="UTF-8"?> < ...
When using the application below, if the user is not in Tab 2 or Tab 3 and clicks on refresh, the page automatically goes to Tab 1. Is there a way to prevent this behavior and keep the user in their current tab after refreshing? Any suggestions on how to ...
I am attempting to create a fixed navigation bar by customizing the Bootstrap CSS file. The goal is to change the navbar's color and make it stick to the top when scrolling down. Although I followed the instructions in this article, the JS code I add ...
I have come across this stunning image: https://i.stack.imgur.com/tUYMc.png It serves as a header for a website - click on it to see the full size. I am trying to replicate this using HTML, CSS, and images, but I'm struggling. It needs to be 100% w ...
I am encountering an issue where the drop-down menu is visible, but when I try to make it disappear and then hover over it again to bring it back, it does not reappear. Here is the CSS code I am using: * { margin: 0; padding: 0; } body { back ...
Currently, I am attempting to utilize $.ajax in order to retrieve an html string from a php file and append it to the current html div. Oddly enough, when I use php echo, everything functions properly. However, when I attempt to load dynamically using $.lo ...
In my HTML code below: <div class="row"> <div><span class="checkbox"></span></div> <a title="something"></div> </div> <div class="row"> <div><span ...
My Django form has a section that is set up like this: <select {% if 'ba1' in widget.name or 'bs1' in widget.name or 'pm2' in widget.name %} disabled {% endif %} id="{{ widget.attrs.id }}" ...
Here is an example that I have created for this issue: http://jsfiddle.net/SXEty/ <style> table td, th { padding: 8px; text-align: left; } table td:nth-child(1) { color: red; } table td { color: blue } </style> ... <table> <tr> ...