JSFiddle - React, Tailwind, and code Playground
HTML
<div>
<table cellspacing="0" cellpadding="2" style="border-collapse: inherit; width: 100%;">
<tbody><tr>
<td valign="top" id="a9caa25c_49865Caption">
* Business E-mail</td>
<td valign="top" style="width: 145px;"><input type="text" onkeypress="a9caa25c_handleEnterKey(this, event);" value="" name="a9caa25c_49865" id="a9caa25c_49865" maxlength="100"></td>
</tr>
<tr>
<td valign="top" id="a9caa25c_49866Caption">
* First Name</td>
<td valign="top" style="width: 145px;"><input type="text" onkeypress="a9caa25c_handleEnterKey(this, event);" value="" name="a9caa25c_49866" id="a9caa25c_49866" maxlength="50"></td>
</tr>
<tr>
<td valign="top" id="a9caa25c_49867Caption">
* Last Name</td>
<td valign="top" style="width: 145px;"><input type="text" onkeypress="a9caa25c_handleEnterKey(this, event);" value="" name="a9caa25c_49867" id="a9caa25c_49867" maxlength="50"></td>
</tr>
<tr>
<td valign="top" id="a9caa25c_49864Caption">
* Company Name</td>
<td valign="top" style="width: 145px;"><input type="text" onkeypress="a9caa25c_handleEnterKey(this, event);" value="" name="a9caa25c_49864" id="a9caa25c_49864" maxlength="50"></td>
</tr>
<tr>
<td valign="top" id="a9caa25c_49863Caption">
* Select a City</td>
<td valign="top" style="width: 145px;"><input type="text" onkeypress="a9caa25c_handleEnterKey(this, event);" value="" name="a9caa25c_49863" id="a9caa25c_49863" maxlength="50"></td>
</tr>
<tr>
<td valign="top" id="a9caa25c_49874_cCaption">
* Select a State</td>
<td valign="top">
<select style="width: 45px;" onmousedown="a9caa25c_fixWidth(this,...
CSS
div { width: 360px; position: relative; z-index: 100; border: 1px solid green; }select { /*position: absolute; z-index: 500; width: 145px*/ }
/*select:hover { border: 10px solid red}
select:focus { border: 10px solid green}
*/
JavaScript
function a9caa25c_getValue(id) {
var ctl = document.getElementById(id);
var tagName = ctl.tagName.toLowerCase();
if (tagName == 'input') {
var type = ctl.type.toLowerCase();
if (type == 'checkbox') {
return a9caa25c_getCheckBoxValue(ctl);
}
if (type == 'radio') {
return a9caa25c_getRadioButtonValue(ctl);
}
return a9caa25c_getTextFieldValue(ctl);
}
else if (tagName == 'select') {
return a9caa25c_getComboBoxValue(ctl);
}
return '';
}
function a9caa25c_getCheckBoxValue(checkBox) {
return checkBox.checked ? checkBox.value : '';
}
function a9caa25c_getRadioButtonValue(radioButton) {
var radioButtons = document.getElementsByName(radioButton.name);
for (var i = 0; i < radioButtons.length; i++) {
if (radioButtons[i].checked) {
return radioButtons[i].value;
}
}
return '';
}
function a9caa25c_getComboBoxValue(comboBox) {
return comboBox.options[comboBox.selectedIndex].value;
}
function a9caa25c_getTextFieldValue(textField) {
return a9caa25c_trim(textField.value);
}
function a9caa25c_verifyEmpty(id) {
if (a9caa25c_isEmpty(id)) {
a9caa25c_setError(id, 'Please provide a value');
return true;
}
a9caa25c_removeError(id);
return false;
}
function a9caa25c_isEmpty(id) {
var value = a9caa25c_getValue(id);
return (value.length == 0);
}
function a9caa25c_verifyRegExp(id, regExp, errMsg) {
var value = a9caa25c_getValue(id);
if (value != '') {
try {
var matches = new RegExp(regExp).exec(value);
if (matches == null || matches[0] != value) {
a9caa25c_setError(id, errMsg);
return false;
}
}
catch (e) {}
a9caa25c_removeError(id);
}
return true;
}
function a9caa25c_removeError(id) {
var element = document.getElementById(id);
element.setAttribute('errmsg',...