Having trouble selecting the text field after adding CSS styling

This problem is puzzling me, as it seems like a simple issue but I can't pinpoint the cause.

UPDATE: I have created a fiddle where you can see the problem in action: http://jsfiddle.net/X374V/1/

The form contains a basic text input:

<input type="text" name="commentor" id="commentor"  />

styled with:

#commentor {
    position:relative;
    float:left;
    margin-bottom:5px;
    height:25px;
    width:160px;
    border-style:solid;
    border-width:1px;
    border-color:#000;
    background-color:#CCC;
}

When trying to click into the text box to type, I've noticed that I need to click at the very top edge for it to work, clicking in the middle doesn't register. Is there a solution to fix this?

htmlcss

Answer №1

The issue has been resolved. The problem was that the div element was overlapping the input.

#commentorName {
    color: #33CCCC;
    display: inline;
    font-family: futuraCondensed;
    font-size: 20px;
    line-height: 1.5em;
    position: relative;
}

Answer №2

Check out this demo where everything is functioning smoothly.

I updated the commenter section from a div to a span.

http://example.com/demo123

Answer №3

To improve the layout, adjust the margin-left of the label:

#reviewerName {
    position:relative;
    top:10px;
    font-family:arial;
    font-size:18px;
    color:#336699;
    margin-left: 200px;
}

Check out the demonstration on JSFiddle: http://jsfiddle.net/someusername/AbCdEf/

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

having trouble capturing the web element containing _ngcontent-c6 using python and selenium

I am having trouble capturing the highlighted web element in the screenshot below: https://i.sstatic.net/7ihmD.png I have attempted various options using both absolute and relative paths: submit = driver.find_element_by_xpath("html/body/vra-root/vr ...

pythonhtmlcssseleniumwebdriver

"Creating a duplicate of an element by utilizing the `next`

I have a dilemma involving two divs within a section of my project - one div is dynamically created while the other exists statically. My goal is to transfer the non-dynamically created div into the one that is generated dynamically. let adContainer = $ ...

javascripthtmljquery

Enhance React-D3-Graph ViewBox

I have a dataset named actors storing nodes and links called scratch. The structure is as follows... { "nodes": [ { "id": "Guardians of the Galaxy" }, { "id": "Chris Pratt" }, ...

javascriptcssreactjsd3.js

Tips on how to show the image icon in place of the image name

Here is a code snippet for multiuploading images using Vue. Currently, the uploaded images are displayed by their file names. However, I am looking to enhance this functionality by displaying an image icon instead of the file name. If anyone knows how to ...

htmlvue.js

Identify and mark labels when hovering over them

Hello everyone! I'm completely new to this, so please be gentle :). Apologies in advance if my terminology is off. I have zero experience with HTML, but I landed here from working with FileMaker. Currently, I am developing a FileMaker database for my ...

htmlgoogle-maps-api-3

Transfer text from one form to a text field on a different website

I've created a form that allows users to input numbers in a field and then directs the page to a specific URL. Here's the code snippet: <html> <head> <meta charset="utf-8"> <title>Tracking</title> </head& ...

javascripthtmltextfield

Angular input field for numbers does not display default values

In my stock-status.component.ts file, I have the code snippet below: @Component({ selector: 'app-stock-status', template:` <input type="number" value='0' min='0' required [(ngModel)]='updatedStockValue& ...

htmlangularinputangular-template

Include a condition to check the value of each row (angular material)

I am facing an issue where I need to apply a condition based on the value of the current column, but I am unable to access the value of the current row. I am unsure which variable to use in order to check the condition. I tried using 'row' but it ...

htmlangulartypescriptangular-materialmat-table

What is the process for translating a single line of code from jQuery to vanilla JavaScript?

How should the code block $('#output').on('input ','.dynamic-Qty', function(e){ be handled? $('#output').on('input ','.dynamic-Qty', function(e){ let z = e.target.dataset; console.log(z.id) conso ...

javascriptjqueryhtml

Unable to eliminate border from image within label

The following code generates a border that appears to be approximately 1px thick and solid, colored grey around the image. Despite setting the border of the image to none, the border still remains. Here is the code snippet: <label> <img styl ...

htmlcss

Utilize CSS with dynamically created elements

I am currently figuring out how to use my .each() function with a $(document).ready and a click event. Here's what I have so far: $(document).ready(function(){ $(".help-inline").each(function() { $(this).css('display', 'none&apos ...

javascriptjquerycss

Creating a soft focus effect in a specific region (behind the text)

While working on my homepage created with HTML/CSS/Javascript, I have text positioned at the top left corner of the screen. The challenge arises from the fact that I am using different backgrounds sourced from Reddit, and a script randomly selects one duri ...

javascripthtmlcssweb

Can you explain the distinction between max-width and min-width in media queries for HTML and CSS?

Could you explain the distinction between max-width and min-width in media queries in HTML and CSS? @media (min-width:480px) { /* styles for smartphones, Android phones, and landscape iPhone */ } @media (min-width:600px) { /* styles for portrait tabl ...

cssmedia-queries

Can you explain the distinction between Declared Values and Specified Values?

I found myself confused by the distinction between Declared Values and Specified Values. Initially, I believed that the Declared Values were set by the author. These values then filter down to a single value, known as the "winning value", which becomes t ...

css

The button on my page refuses to align in the center, and I'm at a loss as

Struggling to center a button within my div, despite having all other content centered. Here is my code: .middle { width: 100%; height: auto; text-align: center; position: relative; ...

htmlcssbuttoncenter

My goal is to extract a property from each item in a list and dynamically insert an incremented number as HTML within those items using JavaScript

I am attempting to utilize JavaScript to extract the numerical value from the list attribute, and insert that value as HTML within the list items so they are displayed on the page. Below is the original list: <ol class="slideshow"> <li data-s ...

javascriptjqueryhtml

Customize the appearance of Woocommerce's blockUi feature with your

During an Ajax request, blockUI adds a style to the blocks of the checkout form and cart with "background: '#fff'". However, my entire website theme is black and I do not want the background color of the blocks to be white. Is there a way to remo ...

javascriptphpcsswordpresswoocommerce

Guide on displaying a list of images in a single line with rows and columns

I am in search of a solution to create the user interface depicted in the attached image using React. Additionally, this post includes a link to another post on the same site: How to add a single line image list that is horizontal scrollable (in react js). ...

javascripthtmlcssreactjsmaterial-ui

Can you explain the significance of Angular 2 hashtags within a template?

Currently exploring Angular 2 and stumbled upon the following code: <input #searchBox (keyup)="search(searchBox.value)" Surprisingly, it works! Despite its functionality, the significance of #searchBox eludes me. Extensive research in the documentati ...

javascripthtmlangulartypescript

$PHP_SELF will be executed immediately upon the page loading

I recently designed an HTML page for inputting data into a MySQL database. In this setup, I've integrated PHP scripting directly within the HTML code. Take a look at the snippet below, <html> <head> </head> <body> <?php / ...

phpmysqlhtml