/    Sign up×
Community /Pin to ProfileBookmark

Altering display of text box

Copy linkTweet thisAlerts:
Feb 24.2007

I have put the following into my script:

<style type=”text/css”>

input.text {
font-family: TrebuchetMS;
font-size: 15pt;
font-weight: bold;
background-color: 336699;
border-color: 336699;
border-style: inset;
border-width: 2px;
color:FFFFFF; }

p {color: red; }
b {color: green;}
i {color: green;}

</style>

The p b and i tags do as instucted (ie change the font colour) but the text box on the page is unaltered from the version without the style sheet.

what is wrong?

to post a comment
CSS

4 Comments(s) ↴

Copy linkTweet thisAlerts:
@WebJoelFeb 24.2007 — I have put the following into my script:

<style type="text/css">

input.text {

font-family: TrebuchetMS;

font-size: 15pt;

font-weight: bold;

background-color: 336699;

border-color: 336699;

border-style: inset;

border-width: 2px;

color:FFFFFF; }

p {color: red; }

b {color: green;}

i {color: green;}

</style>

The p b and i tags do as instucted (ie change the font colour) but the text box on the page is unaltered from the version without the style sheet.

what is wrong?[/QUOTE]
Because:
p {color: red; }

b {color: green;}

i {color: green;}[/QUOTE] is not addressed to affect any occurance of <p>, <b> or <i> occuring in "input.text", explicitly. -Would be my first guess. ?

Try adding:input.text p {color:red;}

input.text b, input.text i {color:green}[/QUOTE]
This will make any <p> in "input.text" be RED text, and any <b> and/or <i> in "input.text" be GREEN text.

The beauty of CSS is also the bane of CSS, -that you must state explicitly and exactly what you requrie. IE often 'guesses' what it think you you wanted (incorrectly doing so). That is why so often you hear '..this works in IE but fails in Firefox/Mozilla/Opera/other non-browser etc. ?
Copy linkTweet thisAlerts:
@Jeff_MottFeb 24.2007 — spiresgate, your CSS is selecting all INPUT elements that also have the CLASS attribute set to "text". Do not confuse this with the TYPE attribute. I can't see your HTML, so this is only an educated guess, but you should look there first.
Copy linkTweet thisAlerts:
@spiresgateauthorFeb 25.2007 — Thanks for your reply which I am sure contains the germ of the answer.

I am trying to teach myself CSS from scratch using web tutorials but have fallen at the first hurdle.

I concocted the original piece of CSS to see how it works. The p, b and i were set to test how I could affect regular text and not as part of the attempt to change text in the input text box, but I am assuming the success with p, b and i indicated that the style shet concept was working.

The problem is that the text in the input box is not affected by the style code I have written (or more accurately, copied from a web tutorial).

This is the part of my HTML that I expected to be affected.

<div style="position: absolute; top:50%; left:75%;">

<img src="oldbadge.jpg" width="180" Height="180" border="0" name="ModernTimes">

<form name="caption">

<input type="text" name="text1" size="25">

</form>

</div>

Does that explain my problem more clearly?
Copy linkTweet thisAlerts:
@spiresgateauthorFeb 25.2007 — Jeff Mott

You are correct!

I inserted class= "text" into my input line in HTML and it worked.

Thanks a lot. If I can learn one new thing a day I might crack this CSS thing!
×

Success!

Help @spiresgate spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 5.11,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...