[SOLVED] css styling for input tag within DIV not working

mfoley · 10-06-2022, 12:27 PM

I have the following:

Code:

<style>   
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>

The text "John M." neither shows with Courier New, nor in blue. What am I doing wrong?

scasey · 10-06-2022, 12:57 PM

The in-line style specification overrides the definition. The C in CSS stands for Cascading.
From w3schools:

Quote:

All the styles in a page will "cascade" into a new "virtual" style sheet by the following rules, where number one has the highest priority:

Inline style (inside an HTML element)
External and internal style sheets (in the head section)
Browser default
So, an inline style has the highest priority, and will override external and internal styles and browser defaults.

https://www.w3schools.com/Css/css_howto.asp

teckk · 10-06-2022, 01:05 PM

This worked for me.

Code:

<!DOCTYPE HTML>
<html lang = "en">

<style>   
<!--div.booga input[type="text"] { font-family: 'Courier New'; color: blue }-->
    div {font-family: 'Courier New'; font-size: 16px; background-color: #FFFF99; color:darkblue}
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>

But, I don't do this much.

boughtonp · 10-06-2022, 01:33 PM

Quote:

Originally Posted by mfoley

The text "John M." neither shows with Courier New, nor in blue. What am I doing wrong?

At least four things...
* Not stating which browser(s) you are testing this with.
* Not using the browser developer tools to inspect the element and see whether styles are applied or not and whether anything is overriding it.
* Not re-testing your partially-simplified example before - your example (first code block below) does do what you say it doesn't.
* Not simplifying your test case as far as possible - i.e. strip out everything not directly relevant to your issue, as per second code block below.

Code:

<!doctype html><meta charset=utf-8 />

<style>   
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>

:
:

<div class=booga style="position: absolute; top: 190px; left: 180px">     
    <input type="text" name="FMname" readonly width: 35em; border: 1px solid blue;" value="John M."/>
</div>

Code:

<!doctype html><meta charset=utf-8 />
<style>
   div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>
<div class=booga>
   <input type="text" value="John M." />
</div>

Both of those show blue text in Courier New font here (with the relevant entry showing in browser dev tools).

Do you have Courier New font installed? Maybe what you actually want is the generic "monospace" instead?

mfoley · 10-07-2022, 11:55 AM

As it turns out, I simplified my example too much. In my actual code I had:

Code:

<style>
div.booga { position: relative; font-family: 'Courier New'; border: 2px solid black; width: 1200px; height: 2000px; background-size: 1200px 2000px } ;
div.booga input[type="text"] { font-family: 'Courier New'; color: blue }
</style>

As boughtonp recommended, I ran the html through the WC3 Markup Validator and it revealed an error with the trailing semi-colon on the first div.booga line. When I removed that, it worked!

Thanks.