advanced css

[acarur01]

I am trying to apply a more advanced css for a text field and the following css does not seem to work as expected. I predict it is because of table tags being generated instead of simple html spans. Is there a way to apply these if at all? It works fine if I generate a simple html ( provided below)

.e-input {
  display: inline-block;
  position: relative;
  width: 167px;
  height: 25px;
  background: #bbbbbb;
  background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, #979797), color-stop(100%, #bbbbbb)), #bbbbbb;
  background: -webkit-linear-gradient(top, #979797, #bbbbbb), #bbbbbb;
  background: -moz-linear-gradient(top, #979797, #bbbbbb), #bbbbbb;
  background: -o-linear-gradient(top, #979797, #bbbbbb), #bbbbbb;
  background: linear-gradient(top, #979797, #bbbbbb), #bbbbbb;
  border-radius: 6px;
}
.e-input::after {
  position: absolute;
  top: 1px;
  left: 1px;
  right: 1px;
  border-top: 1px solid #c9c9c9;
  border-bottom: 1px solid #f4f4f4;
  background: #fff;
  height: 21px;
  border-radius: 5px;
  content: "";
  z-index: 1;
}
.e-input > input {
	position: absolute;
	top: 0;
	left: 1px;
	width: 100%;
	height: 25px;
	border: none;
	background: transparent;
	margin: 0;
	padding: 0 8px;
	z-index: 2;
	font: 13px arial;
	color: #343434;
	border-radius: 6px;
	-webkit-appearance: none;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
	line-height: normal;
	vertical-align: baseline;
}
.e-input > input::-webkit-input-placeholder {
  color: #999;
}
.e-input > input::-moz-placeholder {
  color: #999;
}
.e-input > input::-webkit-search-decoration, .e-input > input::-webkit-search-cancel-button {
  -webkit-appearance: none;
}
.e-input > input:disabled {
  margin: 2px 1px;
  background: #f4f4f4;
  height: 21px;
  -webkit-box-shadow: 0 0 1px 2px rgba(255, 255, 255, 0.5), inset 0 -6px 8px #fbfbfb, inset -1px 0 1px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), inset 0 -6px 8px #fbfbfb, inset -1px 0 1px rgba(0, 0, 0, 0.2);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.5), inset 0 -6px 8px #fbfbfb, inset -1px 0 1px rgba(0, 0, 0, 0.2);
  border-radius: 4px;
  color: #b9b9b9;
}
.e-input > input:disabled::-webkit-input-placeholder {
  color: #b9b9b9;
}
.e-input > input:disabled::-moz-placeholder {
  color: #b9b9b9;
}
.e-input > input:focus {
  outline: none;
  -webkit-box-shadow: 0 0 1px 2px #00A9D4;
  -moz-box-shadow: 0 0 0 2px #00A9D4;
  box-shadow: 0 0 0 2px #00A9D4;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.e-input.e-error > input {
  -webkit-box-shadow: 0 0 1px 2px #E32219;
  -moz-box-shadow: 0 0 0 2px #E32219;
  box-shadow: 0 0 0 2px #E32219;
}
.e-input.e-search > input {
  background: transparent url() 8px 6px no-repeat;
  padding-left: 24px;
}
.e-input.e-search > input:hover, .e-input.e-search > input:focus {
  background-position: 8px -19px;
}
.e-input.e-search > input:disabled {
  background: #f4f4f4 url() 8px -47px no-repeat;
  opacity: 1;
}

sample of how I want the fields to look

<span class="e-input"><input placeholder="Placeholder..." type="text"></span>
<span class="e-input e-error"><input value="Error..." type="text"></span>
<span class="e-input"><input value="This field is disabled..." disabled="disabled" type="text"></span>

the code that SC generates:

<!---text field---->
<table id="isc_Y" width="170" cellspacing="0" cellpadding="2" border="0" role="presentation">
<tbody></tbody>
<colgroup>
<tbody>
<tr>
<tr>
<td id="isc_Z" class="e-input" align="left" $89="page$$content$TextField" style="">
<input id="isc_11" class="textItem" type="TEXT" tabindex="-1" style="width:166px;height:22px;" autocomplete="OFF" oninput="page$$content$TextField.$43g()" spellcheck="true" $9a="$9b" $89="page$$content$TextField" handlenativeevents="false" name="isc_10">
</td>
</tr>
</tbody>
</table>

<!---disabled textfield---->
<table id="isc_1O" width="170" cellspacing="0" cellpadding="2" border="0" role="presentation">
<tbody></tbody>
<colgroup>
<tbody>
<tr>
<td class="" style="margin:0px;border:0px;padding:0px;background-image:none;background-color:transparent;height:0px;overflow:hidden;padding:0px;"></td>
</tr>
<tr>
<td id="isc_1P" class="e-input" align="left" $89="page$$content$TextFieldDiabled" style="">
<input id="isc_1R" value="test value" class="fieldDisabled" type="TEXT" tabindex="-1" style="width:166px;height:22px;" autocomplete="OFF" readonly="TRUE" oninput="page$$content$TextFieldDiabled.$43g()" spellcheck="true" $9a="$9b" $89="page$$content$TextFieldDiabled" handlenativeevents="false" name="isc_1Q">
</td>
</tr>
</tbody>
</table>

[Isomorphic]

Selectors like those don't even work in versions of IE that are still around, so there's little point going further with this unless it's acceptable that IE looks broken.

[acarur01]

Ok - but is there any way to manipulate the textfield to look closely like that without using the selectors? Worse case scenario, I can divy up the css into different textitem properties if at all.

[Isomorphic]

If you want something that actually looks the same cross-platform, you're going to need to use multiple SmartClient widgets to do it, as well as a bunch of images. IE doesn't even support those gradient definitions, box-shadow or border-radius.