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.
A PDF file is being created from an HTML file using the princexml pdf converter package. The data for the HTML file is provided by the server. In the browser, jQuery is used to generate the input string (HTML code) for creating the PDF. Once the input stri ...
After browsing multiple options online, I decided to turn to the expertise of the Stack Overflow community to ask for recommendations based on personal experience. I am specifically in search of a plugin that can substitute a select element with a custo ...
Currently, I have a series of hardcoded HTML elements in my code snippet. <!-- Reciever Message--> <div class="media w-50 ml-auto mb-3"> <div class="media-body"> ...
I am facing an issue with my responsive canvas that should resize to fit the screen window within a div. The canvas is intended to be 1100x1100 but needs to scale based on the screen size while maintaining a square aspect ratio. The problem arises when th ...
Currently working on a webpage where I am showcasing a testsuite file as the parent node and test cases within the testsuite file as child nodes. I have added checkboxes to both the parent and child nodes. Now, my goal is to include an ex ...
I am encountering an issue with my bootstrap navbar where the button does not appear on the mobile version. This is happening while testing on my Windows Phone. Below is the code for my navbar: <nav class="navbar navbar-default navbar-fixed-top" ro ...
Having trouble with CSS. I would like to make this form symmetrical. Buttons should be in one column, textfields in another, and the question mark should also have its own column. Apologies if the ticket structure is not perfect, this is only my second on ...
Is there a way to achieve this specific layout with the "plus" icon positioned below the card layout? https://i.sstatic.net/W5ZRM.png I have attempted the code below: <section layout="column" style="background-color: black;"> <md-c ...
I am currently working with HTML5, PHP, and JavaScript. My goal is to implement Ajax in order to display the sizes of a selected product when an option is chosen from #productoSeleccionado. However, I believe that there may be an issue with my code as the ...
I am trying to align my text vertically in the middle using a ch-grid <div> (the circle color element). Is it possible to achieve this without specifying a display attribute for the <p> element? I plan to hide it by setting display:none initia ...
I'm encountering an issue with implementing a fixed header for my table using the DataTables plugin. Despite previously asked questions addressing similar problems, I am still unable to resolve it. I suspect that conflicting CSS or missing CDN links c ...
I'm having trouble with sizing a child div inside a parent div. The problem is that the child div's size changes according to the number of elements it contains, but I want all the child divs to be the same size regardless. This issue arises with ...
I am having some trouble arranging two columns in a row for my Ionic/Angular project. It seems like the content is stacking on top of each other instead of side by side. Here's the CSS I'm using: <ion-grid class="rewards-container&q ...
I am currently in the process of developing the front-end for a web application using the material library. The issue I am facing is that when a field does not meet its requirements, such as needing to enter a 'bedrijfsnaam', the border turns red ...
When I tried to access a component created using a selector within some HTML, I misunderstood the hierarchical provider creation process. I thought providers would look for an existing instance and provide that when injected into another component. In my ...
In this interactive demonstration, you can see how jQuery can be utilized to create a terminal-like feature. This functionality ensures that as new items are added to a scrollable div, the scroll automatically locks at the bottom. Pay close attention to l ...
Having an issue with Safari 6.1.5 not displaying a pattern in an SVG rectangle. After simplifying the code, here is the test case: <html> <head> <style> .patterned { fill: url("#myid") none; stroke:blue} ...
Page Broken I've searched all over Stack Overflow for a solution to resolve this background image issue. I'm using Bootstrap for the boxes and removed any margins. The problem arises when setting the background as cover; in IE8, it doesn't ...
Help needed! I'm a student struggling to diagnose the issue in my code. Whenever I click the buttons, nothing happens at all. I've tried debugging by isolating each function, but still can't seem to figure it out. I've searched through ...
I need help with extracting text from an HTML div. <div id="example"> I am writing a <span class='outer'>query for help <span class='inner'>on a coding forum</span></span> </div> const te ...