Resizable <textarea> with unique geometries

Is there a way to create a design for a textarea in the shape of a speech bubble or thought bubble, similar to what you might see in a comic? Ideally, I would like it to expand as text is entered into it.

UPDATE:

Hello everyone! Apologies for the earlier confusion in my question, but I did receive some helpful responses overall. If there was a way to give credit to two individuals for their answers, I certainly would as they both addressed my somewhat vague inquiry.

While I am open to using JavaScript, I found that the recommended link actually accomplishes close to what I need. In addition, the initial response sparked a creative idea in me. Considering that posts with this custom wrapper will have a maximum character limit, I could potentially create three variations of the same design to accommodate different post lengths.

Thank you all for your valuable contributions!

javascriptjqueryhtmlcss

Answer №1

CHECK IT OUT LIVE

As far as I know, the textarea element does not inherently respond to content changes and resizing (without JavaScript). Here is a creative solution that I have come up with:

<span class="bubble" contenteditable="true">Type your text here</span>


.bubble{
  position:relative;
  display: inline-block;
  padding: 15px;
  background: #ff9;
  font-family: "Comic Sans MS", cursive, sans-serif;
  text-transform: uppercase;
  color:#000;
  border:2px solid #000;
  border-radius:20px;
  outline:0;
}
.bubble:after{
  content: ' ';
  position:absolute;
  margin: 0 auto;
  left:0;
  right:0;
  bottom:-10px;
  width:15px;
  height:15px;
  background:#ff9;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;
  transform: rotate(45deg);
}

Answer №2

Experiment with a borderless textarea that blends seamlessly with the background color of an accompanying image.

For example, create a div around the textarea with rounded corners to achieve a circular appearance (e.g. set width: 100px; border-radius: 50px; background-color: white). The textarea should not have a visible border, match the background color, and be horizontally centered.

This is just one suggestion among many possible approaches you could take.

Answer №3

If you're looking for a tool to assist you with your needs, I recommend checking out this website: CSS Text Wrapper

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

Utilizing background images in conjunction with media queries

I have a div <div id="page"> </div> Containing the following css code: #page { background: url('images/white-zigzag.png') repeat-x; } @media (max-width: 600px) { #page { background: url('images/white-zi ...

cssmedia-queries

Incorrect Configuration of Angular Testing Module Leads to Failure in Resolving Parameters (NgRx)

Struggling with setting up tests in my Angular CLI 6 project. Here's a snippet from my testing code: beforeEach(() => { spyOn(console, 'info'); TestBed.configureTestingModule({ providers: [ ConsoleLoggerEffects, prov ...

javascriptangulartypescriptngrx

showcasing information retrieved from the database on a PHP page, with the option to delete it by selecting a checkbox and utilizing AJAX

Hello everyone, I am currently working on a PHP project where I need to display data from a database on a page and then remove them from the page (not the database) when a checkbox is selected using Ajax. Do you have any recommended sources or links that c ...

javascriptphpajax

Hiding content: impossible to change. Acting independently?

Currently, I am attempting to showcase a count-down feature on my website (which is currently in localhost so it cannot be linked). However, I have encountered a very peculiar issue. I suspect that the JavaScript may be causing the display to not appear. ...

javascriptcss

Exploring the framework and architecture of JSON, AJAX, PHP, and MySQL

I'm embarking on a new project and looking to incorporate ajax to fetch mysql results in json format for proper display using jQuery ajax. Being inexperienced with json, ajax, and jquery, I seek feedback on the adequacy of my design structure and any ...

phpjquerymysqlajaxjson

Conflicts in routing between Node.js and AngularJS

Currently, my setup involves NodeJS, gulp, and Angular with ui-router. However, I have encountered an issue when configuring Angular to remove the tag (#) from the routes. The problem arises as Angular's routes do not seem to work properly, and the na ...

javascriptangularjsnode.jsexpressangular-ui-router

When you click the button, the page refreshes with no content

Every time I click on a button, an empty page reloads after invoking the button's onClick event. The code snippet on the page is as follows: <html> <head></head> <body>2015</body> </html> I am ...

c#htmlasp.net

Having trouble displaying the input upon clicking the icon

Currently, I am honing my skills in vanilla JavaScript by working on a website project. In this project, I have implemented a feature where clicking on a fingerprint icon triggers an input field to appear for the user to enter their password. The code snip ...

javascripthtmlcss

pre tag may appear differently across various web browsers

Here is a code snippet that I'm having trouble with: <span readonly="true" id="textarea" cols="60" rows="1"> <pre style="{display:inline; white-space: pre-wrap; word-wrap:break-word;}"> SOME TEXT HERE </pre> </span> I am fa ...

htmlcssword-wrappre

Editable Everywhere - Simultaneously editing all columns

Currently, I am utilizing the Jeditable plugin available at this link. My goal is to create a functionality where clicking a specific button triggers all fields within a designated row to become editable and transition into their editable state automatic ...

jquery

Tips for setting up Reaction Roles in discord.js?

Having some trouble implementing this functionality, especially with my reaction role. Wondering if I am using the correct functions/methods. Any help would be greatly appreciated. New to discord bot development and might have a simple question, but any a ...

javascriptnode.jsdiscorddiscord.js

CSS file from outside does not impact the appearance of buttons

Take for instance this button: <input class="btn btn-primary btn-block btn-lg register_btn rounded-0 submit-button" type="submit" value="Submit"> and the CSS code within a custom custom.css file: .submit-button { ...

cssbootstrap-4

RTM is lacking dropdown navigation menus

In Visual Studio 2013 beta versions, there were dropdown menus at the top of the javascript editor that functioned similarly to those in c# and vb editing. Have these been removed from the RTM or final release, or are they available with a specific version ...

javascriptvisual-studio-2013

Tips for accessing a new variable within an array of objects using JavaScript

How can I retrieve a new variable (section) after every 3 objects are called from an array in JavaScript ES6 Map? I've attempted to do this with an ES6 Map, but I'm not achieving the desired result. Can someone please assist me? Thank you! Below ...

javascriptecmascript-6

Decoding the build ID in NextJS: A step-by-step guide

When working with NextJS, there's the option to generate a build ID as mentioned in the documentation here: https://nextjs.org/docs/app/api-reference/next-config-js/generateBuildId Alternatively, it is also possible to retrieve the build ID based on ...

javascriptgitnext.js

Solving Laravel Jquery Ajax 404 Error and Troubleshooting URL Migration Challenges

I am encountering an issue while working with Laravel and Ajax. Below is my code snippet. <button id="openBtn" class="btn blue pull-right"><i class="glyphicon glyphicon-plus"></i> Add Certification</button> $(".editcertifictns # ...

phpjqueryajaxlaravel-5response

npm installation for phonegap failed due to shasum check discrepancy

I've attempted numerous times, but I keep encountering this error (shasum check failed) 4784 error Error: shasum check failed for C:\Users\FENGXI~1\AppData\Local\Temp\npm-7004-QbpFFte5\1387269030233-0.28223602287471 ...

htmlnode.jscordovanpm

Creating a responsive background image inside a div using Twitter Bootstrap

Is there a way to make the #bg image responsive, resizable, and proportional in all browsers? Sample HTML code: <div class="container"> <div class="row"> <div class="col-md-2"></div> <div class="c ...

htmlcsstwitter-bootstraptwitter-bootstrap-3

Please phone back regarding the adjustment of column sizes

Are there any callbacks provided for column resizing in ag-Grid? I was unable to locate any documentation related to column resize callbacks. Here is a sample code snippet: var onColumnResized = function(params){ console.log(params); }; gridOptions.onC ...

javascriptag-grid

Django - issue with table display showing empty row due to query set

In my project, I have two models: one named Season and the other one named Game: # Season class Season(models.Model): teams = models.ManyToManyField('Team', related_name='season_teams', blank=True) current = models.BooleanF ...

pythonhtmlcssdjangosass