Some (Really) Basic CSS Questions

Yeah, I know my badge says I am a sheet designer, but my HTML skills are about a 4/10 and my CSS skills are - generously - a 2/10.  I am in the process of trying to do a cosmetic upgrade on the Torg Eternity sheet, and I am trying to draw from the 5e OGL sheet for inspiration. (Yeah, I know, I'm not going to replicate all its functionality but I'm going to at least try to create a look that is more akin to 5e). But I am running into a problem with the way text inputs work. Here is the code: .charsheet input[type=text] { border-bottom: 1px solid black; } input:focus { outline:0 none; border-bottom: solid 1px; } That code produces this when the field is not focused: And this when it is focused: By contrast, this is what you get in 5e OGL, regardless of whether it is focused: Notice how, even when unfocused, I'm still getting grayed out Left, Right, and Top fields - and when focused, I'm getting a blue bar around the field (maybe a Chrome feature, I'm reading?) I prefer the cleaner look of 5e, if I can easily replicate it. Anyone want to clue me in on what I may be doing wrong here? Thanks in Advance. This is a great community - I would never have got this sheet off the ground to begin with without your help. Matt

If you want to see how a specific look is created in CSS, try inspecting that element in a browser. In Chrome, at least, you can right-click on any element and select "Inspect", and you'll get a pop-up panel showing the element in the HTML, and a "Styles" tab with the currently applied CSS rules (any that have been overwritten will be struck-out). You can also see a list of all CSS properties, including implied ones like height or width, with the "Computed" tab. So, to figure out how the OGL Sheet inputs are styled the way they are, try Inspecting one and scrolling down the list of CSS rules until you either see one that sounds relevant, or one that you don't understand at all, and try applying those to your sheet until it works.

Author X's pointers are a good place to start. Also keep in mind that CSS works in order of specificity, so if you have code: .charsheet .sheet-somediv input[type=text] { border-bottom: 3px solid red; } .charsheet .sheet-somediv input:focus { outline:0 none; border: 1px solid black; } .charsheet input[type=text] { border-bottom: 1px solid black; } input:focus { outline:0 none; border-bottom: solid 1px; } You will wind up with a 3px border around your inputs because that is the more specific css declaration. However, I think the solution to your issue is probably easier. You are setting the bottom border in your code, but doing nothing to the rest of the border. Try this: .charsheet input[type=text] { border:solid 0px 0px 1px;/*Sets the top border to 0 px, the left and right to 0px, and the bottom to 1px*/ } input:focus { outline:0 none; border: solid 0px 0px 1px; }

Thanks to both of you for the help. Managed to resolve this using the Chrome Inspect Element suggestion from Author X. The culprit was a box-shadow element that is apparently some kind-of default. Once I set "box-shadow:none" as a styling element for the inputs, the images shown above were gone.