Css, class selector, within a form, not found

Get Started
1

Hi everyone,
Within a form. a “text” input field, I’d like to suround the input box by a border. Apparently, the class selector is not found.
here is my html code:

<head>
	<title>Replace text</title>
	<meta charset=utf-8>
	<link rel="stylesheet" type="text/css" href="css/test.css">
</head>

<form name="replaceStr" method="post">
	<div id="searchForLabel">
		<input type="text" name="textToSearch" class="textAssign"/>
		<input type="text" name="textToChange" class="textAssign"/>
	</div>
	<input type="submit" name="mySub"/>
</form>

Here is my css file’s content:

form#searchForLabel.textAssign { border: 1px solid red; }
I don't get the desired red border ! Can anyone help me with that please? Thanks
2

Hi deotpit,

You need to separate your rule selectors a little. At the moment, your rule is trying to match a form element with the id ‘searchForLabel’ and the class ‘textAssign’.

Judging by your HTML, what you really want is this:

form #searchForLabel .textAssign 
{ 
    border: 1px solid red; 
}
2 Likes
3

or just #searchForLabel . textAssign since there should only be one instance of an id on a page, so there’s no need to identify it in the form.

2 Likes
4

What seems strange but is true, is that the space, except at the end before the {, is itself a selector. It’s the descendant selector.

5

Thank you so much fretburner !
All i needed was a little bit of a space but I would have never thought by myself I’m afraid :frowning:

6

You bet :slight_smile: With my lack of confidence…