-1

I've been working on building this Thermometer Converter project in HTML/CSS/JS

I applied some CSS to my input but for some reason it isn't applying.

The fields should be stretched to fit the width & height of the div of 33.33vh that I already set

Here's the fiddle https://jsfiddle.net/Lnkjuwbe/

input [type=number] {
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  font-family: Poppins, sans-serif;
  font-size: 10em;
  text-align: center;
  border: 0;
  padding: 100%;
}
Rayees AC
  • 4,426
  • 3
  • 8
  • 31
Henry N
  • 3
  • 1
  • Welcome to Stack Overflow. Please review [ask] to see how to ask a good question, and [edit] your question to include all of the relevant code. External links are fine, but only when the relevant code is also included here, as links can break or change over time and make your question less useful to other users. – FluffyKitten Sep 08 '20 at 16:54
  • Your question is quite vague. Why dont you apply a class or id to the specific input and apply your CSS accordingly then in your css .thermo{ all your styles here } – Brian Wiltshire Sep 08 '20 at 16:56
  • I did apply an ID as there are 3 different ID's but they all share the same input class type https://jsfiddle.net/Lnkjuwbe/ – Henry N Sep 08 '20 at 17:00
  • Also, the padding of 100% will cause you problems..The id that you applied is to the containing div, not the input itself. – Brian Wiltshire Sep 08 '20 at 17:02
  • Please [take the tour](https://stackoverflow.com/tour) so you know how to participate here. – isherwood Sep 08 '20 at 18:15

2 Answers2

1

You have a space in your selector. It should be input[type=number]. As it is it's looking for any element with that attribute inside any input element.

isherwood
  • 58,414
  • 16
  • 114
  • 157
1

In CSS the selector input [type=number] means "any element, which is descendant of <input> and has an attribute type with value number" (see Descendants combinator).

You probably want to use the selector input[type=number] (notice no space), which means "any <input> element, that has an attribute type with value number".

Also, I'd suggest using id or class attribute to identify the element more concisely:

<input id="thermometer" type="number" />

#thermometer { ... }

… or:

<input class="thermometer" type="number" />

.thermometer { ... }
Parzh from Ukraine
  • 7,999
  • 3
  • 34
  • 65
  • Definitely reusable classes before IDs. – isherwood Sep 08 '20 at 17:09
  • No, not necessarily. I agree, there's a common convention of preferring classes over IDs, but they are different tools for different clearly defined purposes. In this case, if there will ever be only one thermometer, then I'd use ID; otherwise - class. – Parzh from Ukraine Sep 08 '20 at 17:13
  • I'd still use a class. You rarely know that you'll _never_ need it again, and it's unwise to needlessly limit use development by using an ID. Also, it's more likely that someone else might need to change the ID for functional purposes and break your styling. – isherwood Sep 08 '20 at 18:10
  • Let's not start a holy war. I'm only saying "know your tool", nothing more. – Parzh from Ukraine Sep 08 '20 at 18:22