Roll20 uses cookies to improve your experience on our site. Cookies enable you to enjoy certain features, social sharing functionality, and tailor message and display ads to your interests on our site and others. They also help us understand how our site is being used. By continuing to use our site, you consent to our use of cookies. Update your cookie preferences .
Advertisement Create a free account Compendium in Game, Join Today

[CSS] Border on select of input


Edited 1600271933
I see on a lot of sheet, the selection of a input make appear a border of different color or size. That border is black when the css is not precised. But after some reading of the css of this different sheet I never found how is altered that border.  My first trying is to point to:  but it's not working. Did someone know how to point that "Effect" for alter or remove it on custom sheet ?  (Ps: I just need the css for "Point" it. From that I think I could be able to edit or remove the apparition of the box with my knowledge)
ᐰndreas J.
Forum Champion
Sheet Author
With inputs, I have the tendency to specify [type="number"]  in the css files, as sometimes it seems css is ignored otherwise. Not sure it it's actually a thing, but I do it to be sure. So this might work: input[type="number"].sheet-focuseffect:focus, input[type="text"].sheet-focuseffect:focus{ border:none; } for any number or text input with the "focuseffect" class.

Edited 1600280736
The problem here is that it's not working like that too.  I had created a new sandbox sheet for the test.  I created a test.html with just a div and a input inside And a test.css with just the solution But like that the "Black border" continue to appear on focus:  -> It's look like the black border appear even if it's not exist... Or I failed to point it again ?  I am on Google Chrome [Updated], Windows 10 [Updated] °^°) 
Scott C.
Forum Champion
Sheet Author
API Scripter
Well, let's do some troubleshooting. While Andreas is correct and a lot of things about inputs need a high specificity to work in CSS, the focus styling isn't one of them. All you need to do for the focus styling is this: :focus{     background-color:red; } replace the background-color specification with whatever you'd like. As a note, the dark black border you see there is actually from the outline property, not the border property.
Thank you for your answer Scott C.  I had modified the test.css with your informations and I got the result I wanted. There is the new test.css: With that, the black "outline" which I had named until now "Border" is vanished ! :D 

Edited 1600336328
I have another problem who is repetitiv when I create Sheet, when it's come to create sheet where I Hide "Div" with a checkbox. I follow the "Swap Hide Area" section of the wiki :&nbsp; <a href="" rel="nofollow"></a>. &nbsp;But It's look like I don't understand something...&nbsp; Should I create another Topic in the forum for asking Help ? Or here is fine too ?&nbsp; Edit: I Create a new one