Major Steps to Reproduce
Contact me for already running case.
or
Create an outer page containing default HTML inputs (checkbox, radio, etc)
Trigger a zEmbedded load to any zk page
Current Result
inputs appearance change
Expected Result
the outer page should not be affected by zEmbedded
1: before embedding
2: after embedding
(current sample on "raw" html objects, but will also affect controls from outer framework libraries, such as bootstrap, react, etc)
Debug Information
zk.wcs, tablet.css.dsp and possibly other ZK styles have document-wide selectors:
//tablet.css.dsp input[type=checkbox], input[type=radio] { -webkit-appearance: none; width: 24px; height: 24px; border: 1px solid #CFCFCF; background: #FEFEFE; background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIHZpZXdCb3g9IjAgMCAxIDEiIHByZXNlcnZlQXNwZWN0UmF0aW89Im5vbmUiPjxsaW5lYXJHcmFkaWVudCBpZD0iemtpZTkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iMCUiIHkxPSIwJSIgeDI9IjAlIiB5Mj0iMTAwJSI+PHN0b3Agc3RvcC1jb2xvcj0iI0ZFRkVGRSIgb2Zmc2V0PSIwJSIvPjxzdG9wIHN0b3AtY29sb3I9IiNFRUVFRUUiIG9mZnNldD0iMTAwJSIvPjwvbGluZWFyR3JhZGllbnQ+PHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCN6a2llOSkiIC8+PC9zdmc+); background: -moz-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #FEFEFE), color-stop(100%, #EEEEEE)); background: -webkit-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%); background: -o-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%); background: -ms-linear-gradient(top, #FEFEFE 0%, #EEEEEE 100%); background: linear-gradient(to bottom, #FEFEFE 0%, #EEEEEE 100%); position: relative; top: -2px; } //zk.wcs input[type="checkbox"] { -webkit-appearance: checkbox; -moz-appearance: checkbox; margin: 0px 2px 2px; } //zk.wcs label, select, button, input[type="button"], input[type="reset"], input[type="submit"], input[type="radio"], input[type="checkbox"] { cursor: pointer; } //tablet.css.dsp input, input:focus, textarea, textarea:focus { -webkit-tap-highlight-color: rgba(255,255,255,0); -webkit-appearance: none; -moz-appearance: none; -webkit-user-modify: read-write-plaintext-only; outline: none; -webkit-user-select: text; } //zk.wcs input, input:focus, textarea, textarea:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; -webkit-user-select: text; } //zk.wcs input, input:focus, textarea, textarea:focus { -webkit-appearance: none; -moz-appearance: none; outline: none; -webkit-user-select: text; } //zk.wcs button, input { *overflow: visible; line-height: normal; } //zk.wcs button, input, select, textarea { margin: 0; font-size: 100%; vertical-align: middle; }
Workaround
