Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text?
Are there alternative methods we could use for this functionality?
Is it advisable to create colored shapes in Illustrator, export them as SVG files, and then embed input tags or textareas within these shapes to allow users to enter text?
Are there alternative methods we could use for this functionality?
Here is a basic example showcasing how to achieve the desired outcome using CSS - providing a foundation for you to build upon.
(Although the CSS can be condensed, I have intentionally kept it detailed to illustrate the process)
.text {
display:block;
width: 60vw;
margin: 1rem 20vw;
}
.textleft {
display: inline-block;
width:49%;
margin: 1rem 0;
padding:0 9% 0 5%;
box-sizing: border-box;
}
.textright {
width:49%;
display: inline-block;
margin: 1rem 0;
padding:0 5% 0 9%;
box-sizing: border-box;
}
.txtarea {
width:100%;
color: #000;
height: 7rem;
font-size:1rem;
box-sizing:border-box;
padding:1rem;
border: none;
border-radius:2rem;
resize: none;
overflow:hidden;
}
#red {
background-color: #c00;
color: #eee;
}
#green {
background-color: #0c0;
}
#blue {
background-color: #33f;
color: #ccc;
}
#yellow {
background-color: #ff0;
}<div class='text'><textarea id='red' class='txtarea' name='myinfo_top'>Some Words - Click on me to type into this text box!</textarea></div>
<div class='textleft'><textarea id='green' class='txtarea' name='myinfo_left'>Some Left Words</textarea></div>
<div class='textright'><textarea id='blue' class='txtarea' name='myinfo_right'>Some Right Words</textarea></div>
<div class='text'><textarea id='yellow' class='txtarea' name='myinfo_bottoms'>Some more Words</textarea></div>To create a div tag that includes specific height and width elements, you can utilize the border-radius property in CSS for rounded corners.
div{
width: 300px;
height: 300px;
border-radius: 20px;
background-color: red;
}
You are free to insert any desired text within the div. It is recommended to use pure CSS for styling rather than adding an image in the background, as it reduces processing time significantly.
When working with my HTML content, I came across the following line: <span>(48 עמודים סה"כ )</span> I am seeking a way to extract only the text "48 עמודים סה"כ" and store the number 48 into an integer variable. Although in t ...
This issue has been resolved Hey there, I'm currently working on a React App with Material-UI and I'm trying to center a Grid item that includes a Card along with two additional Grid items. Below is the relevant code snippet. Although the Cards ...
I was tasked with creating a button that can load various types of content (text, images, videos, etc) into a modal popup window using Ajax without any frameworks. So far, I've been successful with text but have run into issues with loading images. De ...
I am facing an issue while trying to display data extracted from JSON in HTML. Despite my efforts, the data is not showing up on the webpage. I am unsure about what might be causing this error. Any assistance in resolving this matter would be greatly appre ...
I recently started working on a website built with HTML/CSS and encountered an issue with links highlighting when hovered over. The problem arises from the main image on the homepage containing an embedded link, causing the area under it to also highlight ...
Recently, I've encountered a CSS overflow issue while working on a responsive webpage. The problem seems to be stemming from the navigation menu. The declaration of "overflow-x: hidden" is specifically causing the trouble... Initially, I suspected i ...
Hey there, is there a way I can achieve this specific layout without relying on position: absolute? Flexbox would be the preferred method. The main goal here is to have the middle element horizontally centered within its parent element, regardless of other ...
I am currently utilizing Selection.js to develop a customizable grid on my website. To make this work effectively, I need a specific number of div elements to establish the selectable area. In my scenario, I generate all the divs using a for loop and then ...
Below is the javascript code I have written, saved as create.js: var stuff = document.querySelector(".stuff"); var item = document.createElement('div'); item.className = 'item'; stuff.appendChild(item); This is the corresponding HT ...
Currently, my website is built using the framework . I am looking for a solution to make images resize based on different screen sizes, such as iPhones. Can anyone suggest the simplest way to achieve this? I have done some research online but there are t ...
I'm having trouble sending mail from my HTML form using PHP. I've uploaded the necessary files to my hosting server but the mail is still not being sent. Here is my HTML code: <!-- Form --> <form action="http://example.com/sendEmail.php ...
I have a WordPress website with a right sidebar that I want to make sticky while scrolling up and down. I applied some CSS styles to achieve this, and now the sidebar is sticky. However, the issue is that it keeps shifting its position from right to left. ...
Recently, I've been utilizing the JSON library in Python to extract data from JSON files through Python. extractedData = json.loads(jsonfile) While I have a solid grasp on handling JSON files with Python, I am now exploring ways to present JSON data ...
Currently, I am tackling a contenteditable HTML table challenge. My goal is to enforce the insertion of only numeric values while alerting the user if they attempt to input strings or non-numeric characters. Can anyone provide guidance on how to achieve th ...
My goal is to have the menu display and hide list items on click, with them being hidden by default. However, the issue I am facing is that the menu is generated in the admin section, so it automatically assigns a URL to each item. If I set the URL field o ...
I am currently struggling to locate the exact definition of this border color. After inspecting the dom, I cannot seem to find any border style within the input component or its pseudo elements... My main goal is to slightly lighten the color of the input ...
I'm having trouble getting my WordPress video to display when using an iframe. When I try to view it in Internet Explorer, the video automatically loads in Windows Media Player instead of playing through the iframe. The video files are local mp4s and ...
How can I nest an object within another object and then include it in an array of objects inside an Angular service class? I need to enable two-way binding in my form, so I must pass a variable from the service class to the HTML template. trainer.service. ...
When attempting to create a vertical menu, the final result doesn't align as expected. https://i.stack.imgur.com/2ok47.jpg This is the current code being used: $("#example-one").append("<li id='magic-line'></li>") ...
I have created two tables and added a checkbox for each one. Instead of default checkboxes, I have used images that change when clicked. Here is the code snippet: <button class="btn btn-lg btn-customPrint-md no-print" ng-click="checkBoxPrint2 = !check ...