This how to remove border from input element
is a popular question that I am getting time to time from new users.
And there are variations of it about dropdown select button
, calendar cell
, context menu
and so on.
In this post I’d like to explain general method of solving such problems instead of answering “define the following …”
Each input element in Sciter is a plain DOM element or composition of plain DOM elements.
Input elements (and not only inputs) are getting their “primordial” styling by applying rules from Sciter’s internal “master.css” style sheet. To find out styles of particular DOM element start DOM inspector by clicking on its icon in Sciter.exe window.
To highlight needed DOM element click on it by mouse with CTRL+SHIFT keys pressed on keyboard. Or select the element in DOM tree in inspector’s window:
Inspector will show effective style rules applied to the element and also its final (used) styles.
As you see here that <input> element has no border at all. But it has
background-image: url(theme:edit-normal); background-repeat:stretch; instead – background image that is stretched to fill whole element’s area.
The theme:.... images are kind of virtual ones – their rendering is delegated to host OS UI theming services. Therefore background of this particular <input> element is drawn by host OS.
And finally here is the answer on “how to remove border from the input element”.
To suppress borders and any default background drawing declare the following:
input#my {
border: none; /* remove any border */
background: none; /* remove any (default) background */
}