The CSS styling for a <form> <label> is not functioning properly when using "display: block"

I've been trying to get a form label to display at the top of my form by using CSS to set the display property to block. However, despite making sure that my CSS file is correctly linked, I'm not seeing any results. It's puzzling because I can adjust other styles without any issues. I'd love some insight on why this isn't working as expected. Thank you for your assistance!

'''
.reflectionForm label{
    display: block;
    font-size: 25px;
    font-weight: normal;
    color: green
}
'''

'''
function Reflection() {
    return (
        <div> Entry Page

        <form class="reflectionForm">
            <label for="newEntryId"> New Entry:
            <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"/>
            </label>
       
        </form>
        </div>
    );
}
'''

Output

javascriptcssreactjs

Answer №1

To target only the text and not the entire label with the textarea, you can wrap the text in a <span> tag and adjust your CSS selector to focus on the span element:

function Reflection() {
    return (
        <div>
            Entry Page
            <form class="reflectionForm">
                <label for="newEntryId">
                    <span>New Entry:</span>
                    <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"/>
                </label>
            </form>
        </div>
    );
}

.reflectionForm label span {
    display: block;
    font-size: 25px;
    font-weight: normal;
    color: green
}

Check out the Live Demo below:

.reflectionForm label span {
    display: block;
    font-size: 25px;
    font-weight: normal;
    color: green
}
<div> Entry Page
  <form class="reflectionForm">
    <label for="newEntryId">
      <span>New Entry:</span>
      <textarea type="text" id="newEntryId" name="newEntryName" rows="30" cols="75"></textarea>
    </label>
  </form>
</div>

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

How can I send parameters to an onClick event handler in React?

After setting up an onClick event in a ListItem and calling .bind on the method invoked to pass in the clicked list item's id and name values, I encountered an issue. A SO question recommended using bind, but it seems that adding the onClick event to ...

reactjsecmascript-5

Sticky positioning and visible overflow restrictions

When position sticky is used within a container with overflow:hidden, it does not work as expected. However, the overflow hidden property is necessary in this case. <div class="lg:col-start-7 lg:col-end-13" style="overflow:hidden"&g ...

htmlcssimageoverflowsticky

Stripping double quotes from json output

Using a basic array to reference icons like so: {name: "text", avatar: srcs[15]} has been working perfectly. However, I am now dynamically creating an array from my JSON API, resulting in an array of objects structured like this: {name: "text", avatar: ...

javascriptarraysjsonobject

The android application experiences crashing issues when utilizing the position or zIndex style properties within a react-native environment

In my code, I am attempting to display a semi-transparent black screen over my page in order to show a message or prompt in the center. I have tried using zIndex or elevation with position:'fixed' or position:'obsolet', and it works per ...

javascriptandroidreactjsreact-native

Is it possible to manipulate the render order in Three.js CSS3DRenderer?

Is there a way to make certain elements appear on top of everything in the scene, regardless of their distance from the camera? I've attempted using zIndex and z-index on the DOM elements that the CSS3DObjects are based on, but it hasn't had any ...

javascriptjquerythree.js

Error: GraphQl files cannot be imported due to incorrect relative directory path

I am attempting to bring in a mutation from my GraphQL file into my LoginPage file using the following code: import LoginMutation from '../../graphql/login-mutation'; Unfortunately, I am encountering an error that states: import LoginMutation ...

javascriptreactjstypescriptdirectorygraphql

Guide to updating the class attribute of an HTML article element using JavaScript

I am working with 6 different styles in CSS and I am trying to apply them randomly using the following code: <script> function getRandom(max) { return "style" + Math.floor(Math.random() * max); } document.getElementById('YYY ...

javascripthtmlcss

Using PHP and DOJO to transfer HTML via JSON

My data store is currently querying a database and outputting JSON in the following format: $data[] = array('id' => $i, 'prod_id' => $product_id, 'link' => $link); I am curious about how to include a link using the ...

phpjavascriptjsondatagriddojo

The color of the Mui modal overlay background

I need help changing the background color in a MUI model. I tried using backdropProps, but it's deprecated. How can I achieve this? Here is what I have been attempting: <Modal open={model} maxWidth={'md'} f ...

reactjsmaterial-ui

Is it possible to combine multiple filter examples together?

Could you please provide some examples or references related to the next task: var planets = [{ residents: [{ name: 'Mars' }, { name: 'Jupiter' }, ...

javascriptangularjs

Exploring the concepts of relative and absolute paths in JavaScript

I'm struggling to grasp the concept of relative and absolute paths. Can someone please help explain how they operate in relation to the directory? I have the following code but I am unable to include the PostService module. import { Component } from ...

javascriptangularpathrelative-path

Executing Multiple Requests Concurrently in Angular 5 using forkJoin Technique

Important Note The issue lies in the backend, not Angular. The requests are correct. In my Angular5 app, I am trying to upload multiple files at once using rxjs forkJoin. I store the requests in an array as shown in the code below. However, after adding ...

javascriptangulartypescriptangular5

Center the image within a div element

I am interested in incorporating images related to logos into the center of boxes. Is there a way I can achieve this? ...

htmlcss

Color of selected Bootstrap radio toggle buttons

Can anyone help me figure out how to customize the colors of radio toggle buttons using my style.css in Bootstrap? I've managed to change the background color in normal mode, but I'm struggling with changing the checked state. I've searched ...

htmlcssbootstrap-5

Error encountered: The middleware being used is not recognized as a function within the Reddit-clone application. This issue arises while fetching data from

I've been troubleshooting my Reddit-inspired app, and I'm struggling to overcome this issue. I've attempted solutions suggested in YouTube tutorials and followed the documentation for this specific issue. My app is built using Redux-Toolkit. ...

javascriptreactjsjestjsreact-testing-libraryredux-toolkit

Retrieve the property of an object from within an array

I am dealing with an array structure like this: const arr = [{ name: 'One', id: 1 }, { name: 'Two', id: 2 } ]; My goal is to extract and return the name of the object if its id matches a certain value. After exp ...

javascriptecmascript-6

Ways to resolve the issue of incompatible parameters 'action' types in JavaScript

I'm encountering a common problem, but I can't figure out why this error is happening. After updating redux, I encountered the following error message: TS2322: Type '(state: ILanguage | undefined, action: PayloadAction<ILanguage>) =&g ...

reactjstypescriptreact-redux

Steps to generate a nested list with heading tag elements in the exact order as in the DOM structure

My HTML document is full of h1, h2, h3, h4 tags with nesting. Let's take a look at an example. <h2>About cars</h2> <p>Information about cats</p> <h2>About bikes</h2> <p>Information about bikes</p> ...

javascripthtml

Discovering a Subarray within an Array

I have an array called 'array' array = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 11, 12], [13, 14, 15, 16]]; and I am trying to find the index of the subarray [1, 2, 3, 4] However, every time I attempt this, it returns -1 instead of the expected v ...

javascriptarraysindexof

Determine the most similar JSON array

My dataset is in JSON format, { "a": ["73.0", "41.0", "98.0", "43.0"], "s": ["74.0", "43.0", "112.0", "44.0"], "f": ["75.0", "45.0", "116.0", "45.0"], "l": ["76.0", "47.0", "120.0", "46.0"], "x": ["77.0", "49.0", "128.0", "47.0"], "q": ["78.0", "51. ...

javascriptarraysjsondatasetpattern-matching