Modify the background color of the text area to white when it is selected using CSS3

In my css code snippet, I have defined the styling for a registration form which includes various rules for different elements like input fields, labels, and text areas.

.register {
    width: 400px;
    margin: 10px auto;
    padding: 10px;
    border: 1px solid #FAFAFA;
    border-radius: 10px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    color: #444;
    background-color: #f0f0f0;
    box-shadow: 0 0 1px 0 #000000;
    }
    .register h3 {
    margin: 0 15px 20px;
    border-bottom: 1px solid #909090;
    padding: 5px 10px 5px 0;
    font-size: 1.1em;
    }
    .register div {
    margin: 0 0 15px 0;
    border: none;
    }
    .register label {
    display: inline-block;
    width: 25%;
    text-align: right;
    margin: 10px;
    }
    .register input[type=text], .register input[type=password] {
    width: 65%;
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
    padding: 5px;
    font-size: 0.9em;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.07);
    }
    .register input[type=text]:focus, .register input[type=password]:focus {
    background: #FFFFFF;
    }
    .register textarea{
    width: 65%;
    font-family: "Lucida Grande","Lucida Sans Unicode",Tahoma,Sans-Serif;
    padding: 5px;
    font-size: 0.9em;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.07);
    }
    div.textarea > * {
    vertical-align:middle
    }

I am looking for assistance in making the background of the text-area field change to white when focused, similar to the behavior of other input fields in the form.

You can view the current form in action on the Fiddle Demo I have provided.

Any help with this issue would be greatly appreciated. Thank you in advance.

Answer №1

You have focused solely on input elements

.register input[type=text]:focus, .register input[type=password]:focus {
  background: #FFFFFF;
}

Instead, consider including textarea elements as well:

.register input[type=text]:focus, .register input[type=password]:focus, .register textarea:focus {
  background: #FFFFFF;
}

View JSFiddle Demo

Answer №2

It is interesting that you have implemented this for other fields, so why not for textarea as well? Nevertheless, don't forget to update your CSS as shown below.

.register input[type=text]:focus, .register input[type=password]:focus, .register textarea:focus {
background: #FFFFFF;
}

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

Ways to allocate space evenly between components of the same size in React Native

As a beginner in Javascript and React-native, I have been experimenting with the technology to assess its viability for potential use in my current workplace. However, I have encountered some challenges with the user interface. To enhance my understanding ...

Determine the placement of the body with CSS styling

Here is the code snippet from my website: body { background-image: url('background.jpg'); background-repeat: no-repeat; background-attachment: fixed; background-size: cover; } .centered { /* Center entire body */ display: flex; ...

Flexible design for your website content wrapper

When I display the content on my website, it sometimes overlaps the footer because the wrapper does not adjust its size based on the content. I set the height to an absolute value and now I need to find a more flexible option to prevent this issue. I' ...

How to target the last child in Flexbox using CSS order property

Is there a way to correctly detect the last child after rearranging divs using flex order? Even though I have set the order in the CSS, it is still recognizing the last child based on the DOM tree. Since the items are dynamic, we can't rely on nth-chi ...

Positioning of header, main content, and footer elements

My webpage is structured into three sections: the header, the main, and the footer. The header at the top has a fixed height of 109px with a 6px border. The main section should extend across the entire page below the header and reach the bottom where the ...

Tips for consistently implementing focusVisible design on a targeted Material-UI Button element:

When using the Material-UI Button component, I want the "focus" styling to match the "focusVisible" styling. This means I want the same ripple effect to be visible whether the button is focused programmatically or with the mouse, as it would be when focuse ...

Having trouble retrieving the routeName as it consistently returns empty

I attempted to extract the routeName from the URL in order to apply a different class to the body's layout when on the /Category page. https://i.stack.imgur.com/J0hsp.png @{string classContent = Request.QueryString["routeName"] != "/ ...

Why is my link not being acknowledged by its parent <div>?

I am facing an issue where a <a> tag inside a <div> element is not being recognized properly, causing the <div> height to remain unchanged and not accommodate the link as intended. You can view my HTML/CSS code here: http://jsfiddle.net/ ...

Creating lasting placeholder text with gaps between each word

Looking to create a unique text input with static content on the right and editable text on the left https://i.stack.imgur.com/K0YfM.png Any suggestions? ...

Center nested rows vertically within an alert box using Bootstrap

Can anyone provide some insight into why the inner row is not vertically centered within its alert-box? I feel like it might have something to do with the nested row structure. Here is a link to the code: https://jsfiddle.net/d2pg4xta/ <div class=" ...

What is the best way to define a margin according to the size of the device being used

I am working on an angular/bootstrap web app and need to set a left margin of 40px on md, xl, lg devices and 0px on sm device. I attempted to create a spacer in styles.scss like this: $spacer: 1rem; .ml-6{ margin-left:($spacer*2.5); } Then in my HTML, ...

A technique for postponing the addition of a class to a div

I am attempting to create a unique type of slider effect. Inside a single div named #slider, I have 9 items displayed in a line. Link to JsFiddle The slider is 1860px wide, but only 620px is visible at any given time due to the parent having an overflow: ...

What is the best way to incorporate a logo into the top left corner of the Navigation Bar?

Currently, the Studio Ghibli Logo image is embedded in the HTML code at line 17. I am looking to place it in the top left corner of the navbar. How can I achieve this? Here is a reference image: ref image If there is a more efficient way to code the navba ...

Having trouble styling my Aside element correctly

I'm having trouble aligning my aside element on the page. It's not lining up properly with the rest of the content and is overlapping into the header area. How can I resolve this issue? Here's a snapshot of what it currently looks like: ht ...

Issue with jquery_ujs: Font Awesome spinning icon animation functions properly in Chrome but not in Safari

I've integrated font-awesome-rails into my Rails project. When a user clicks the submit button on a form: The submit button should display an animated font-awesome spinner and change text to "Submitting...". The button must be disabled to prevent m ...

Is there a way to develop a login form that retrieves information from a Google Sheet database?

Please help me with a solution. I have developed a registration form which effectively saves users' information in a Google Sheet. However, now I am yearning to create a login form that verifies the stored data and redirects the user to a different pa ...

Inline checkbox label with Bootstrap 5 styling

How can I align the checkbox with its label? Example <div class="row g-1 border-bottom p-3"> <div class="col border-end justify-content-center d-flex align-items-center"> <div class="h6 text-sm-center h-25&quo ...

I am having trouble retrieving images from the backend API. Can someone assist me in resolving this issue?

I am facing an issue while trying to upload an image along with its details. I am able to retrieve all the information but the image is not displaying in the browser. My backend API is built using PHP Laravel and the images are stored in the Storage/app/ap ...

CSS disappears after selecting menu in JSF application with PrimeFaces

Whenever I click on a p:menuitem and update the content of a layoutunit, the CSS style of the layoutunit disappears. Strangely, when I refresh the page, the style magically reappears. Can anyone explain why this happens? <p:layout id="plantillaPrincipa ...

Item on the menu has been pushed lower in the list

There seems to be an issue with the layout of my menu as one item is displaying lower than the others without any clear reason. <html> <head> <title> My Website Homepage </title> </head> <body> ...