CSS/HTML: Input fields not using CSS styles - html

I want to style the text input areas on my form, however when I create a style for input in css, it does not actually style the input box. I have been able to style my button, just not input boxes.
<div class="loginContainer">
<form action ="" method="post">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<label for="username" class="label">Username</label>
</td>
<td width="150">
<input type="text" name="username" size="25" id="username" autocomplete="off" />
</td>
</tr>
<tr>
<td>
<label for="password" class="label">Password</label>
</td>
<td width="150">
<input type="password" name="password" size="25" id="password" autocomplete="off" />
</td>
</tr>
<input type="hidden" name="token" value="<?php echo Token::generate(); ?>">
<tr>
<td>
<label for="remember">
<input type="checkbox" name="remember" id="remember"> Keep me signed in
</td>
</tr>
<tr>
<td>
<input type="submit" class="submit" value="Log in">
</td>
</tr>
</table>
</form>
And here is the CSS for it:
input[type="text"] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
}
This ends up creating a form which creates: http://i.imgur.com/9Hj9Vie.png
Note the lack of style on the input fields. How should I go about fixing this?

It's kind of strange that the border radius is not applied, you can try the following ( note the lack of quotes ):
input[type=text] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
/* new stuff */
border: 1px solid pink;
outline: 1px solid green;
background: orange;
}

If you want the for the password field also to be styled you need to add that tag in the style as well, like this:
input[type=text], input[type=password] {
padding: 4px;
border-radius: 4px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
box-shadow: 0px 0px 8px #d9d9d9;
-moz-box-shadow: 0px 0px 8px #d9d9d9;
-webkit-box-shadow: 0px 0px 8px #d9d9d9;
display: block;
}

Related

How to remove padding (cellpadding) from the <td> element?

I am building a simple calculator using HTML, CSS, and JS. My question is how to remove the padding of the element inside my calculator table.
Visuals
To remove spacing between elements in HTML, googling suggests adding the attributes cellspacing="0" cellpadding="0" to the element, which I did. It also suggests adding a CSS selector table { border-collapse: collapse}. However, border-collapse does not work as I expected: the padding does not get removed, and the table corners become wrecked.
/* Global CSS */
*,
*::before,
*::after {
box-sizing: border-box;
}
:root {
--calc-bg: rgb(184, 243, 216);
--btn-bg: rgb(252, 246, 230);
--active-btn-bg: rgb(106, 200, 153);
--main-btn-bg: rgb(71, 202, 143);
--text-color: rgb(45, 53, 44);
--display-bg: rgb(252, 246, 230);
}
/* Calculator CSS */
#import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght#900&display=swap');
.calculator {
font-family: 'Source Code Pro', monospace;
font-weight: 900;
padding: 10px;
border-radius: 2em;
height: 580px;
width: 500px;
margin: auto;
background-color: var(--calc-bg);
border: solid rgb(45, 52, 42) 5px;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
.display-box {
background-color: var(--display-bg);
border: solid black 0.5px;
color: black;
border-radius: 1em;
width: 100%;
height: 80px;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
#btn {
background-color: var(--main-btn-bg);
}
th,
td {
padding: 0;
}
td {
text-align: center;
vertical-align: middle;
}
input[type=button] {
font-weight: 900;
background-color: var(--btn-bg);
color: var(--text-color);
border: solid rgb(45, 52, 42) 2px;
width: 4rem;
border-radius: 10%;
height: 4rem;
outline: none;
-webkit-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
-moz-box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
box-shadow: 3px 3px 0px 2px rgb(45, 52, 42);
}
input:active[type=button] {
background: var(--active-btn-bg);
transition-duration: 100ms;
transition-timing-function: ease-out;
<table class="calculator" cellspacing="0" cellpadding="0">
<tr>
<td colspan="3"> <input class="display-box" type="text" id="result" disabled /> </td>
<!-- clearScreen() function clears all the values -->
<td> <input type="button" value="C" onclick="clearScreen()" id="btn" /> </td>
</tr>
<tr>
<!-- display() function displays the value of clicked button -->
<td> <input type="button" value="1" onclick="display('1')" /> </td>
<td> <input type="button" value="2" onclick="display('2')" /> </td>
<td> <input type="button" value="3" onclick="display('3')" /> </td>
<td> <input type="button" value="/" onclick="display('/')" /> </td>
</tr>
<tr>
<td> <input type="button" value="4" onclick="display('4')" /> </td>
<td> <input type="button" value="5" onclick="display('5')" /> </td>
<td> <input type="button" value="6" onclick="display('6')" /> </td>
<td> <input type="button" value="-" onclick="display('-')" /> </td>
</tr>
<tr>
<td> <input type="button" value="7" onclick="display('7')" /> </td>
<td> <input type="button" value="8" onclick="display('8')" /> </td>
<td> <input type="button" value="9" onclick="display('9')" /> </td>
<td> <input type="button" value="+" onclick="display('+')" /> </td>
</tr>
<tr>
<td> <input type="button" value="." onclick="display('.')" /> </td>
<td> <input type="button" value="0" onclick="display('0')" /> </td>
<!-- calculate() function evaluates the mathematical expression -->
<td> <input type="button" value="=" onclick="calculate()" id="btn" /> </td>
<td> <input type="button" value="*" onclick="display('*')" /> </td>
</tr>
</table>
} ```
Changing the width and height of the table and its elements, along with using border-collapse: collapse and border-spacing: 0 helped to solve the issue

Table with fixed header on scrolling does not work if it smaller

I've been trying to edit this table(s) for a few days.
The plan is that the header is always at the top when scrolling. Because everything is configured code, I can not work with typical HTML / CSS. After a long time I have found this (almost) working solution.
That the code looks so ugly is because I got this structure inherited and I haven't had the time to worry about it yet.
The problem that still exists is when the DIV outside is smaller than the table needs, the table contracts. Although the columns actually have a given width. If the div is wide enough outside, then the table looks like it should.
What am I doing wrong?
Maybe someone has an idea or solution ready.
This is how it should look (even if the div is smaller just with scrolling)
https://jsfiddle.net/mzue3j9t
Sample:
<div id="GRD1" style="overflow: auto hidden; display: block; position: absolute; top: 22px; left: 20px; width: 400px; height: 176px; font-family: Tahoma; font-size: 8pt; color: rgb(0, 0, 0); z-index: 1; background-color: threedface; visibility: visible; border: 1px solid rgb(127, 157, 185);">
<table class="header" cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<thead>
<tr>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 17px; font-weight: normal;" title="undefined"> </th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 48px; font-weight: normal;" title="">Question</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 19px; font-weight: normal;" title="">i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: right; cursor: default; width: 29px; font-weight: normal;" title="">n.i.O</th>
<th style="white-space: nowrap; border-width: 1px 0px 1px 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 74px; font-weight: normal;" title="">Another check</th>
<th style="white-space: nowrap; border-width: 1px; border-style: solid; border-color: rgb(0, 0, 0); padding: 0px 2px; text-align: left; cursor: default; width: 78px; font-weight: normal;" title="">Commentary</th>
</tr>
</thead>
</table>
<div class="body" style="overflow: hidden auto; height: 100%; width: 100%;">
<table cellspacing="0" cellpadding="0" style="table-layout: fixed; background:threedface">
<tbody>
<tr id="row_1">
<td id="GRD1_num_1" style="border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;;width:17px;text-align:right;white-space:nowrap;">1</td>
<td id="GRD1_0_0" row="1" col="1" editable="1" parentid="0" style="width:48px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Test 1</td>
<td id="GRD1_0_1" row="1" col="2" editable="3" parentid="0" checkstate="1" style="width:19px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_2" row="1" col="3" editable="3" parentid="0" checkstate="0" style="width:29px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" value="0">
</td>
<td id="GRD1_0_3" row="1" col="4" editable="3" parentid="0" checkstate="1" style="width:74px;height:1.2em;text-align:center;white-space:nowrap;background-color:#FFFFFF;border-width:0px 0px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;cursor:pointer;">
<input type="checkbox" style="margin:0px;padding:0px;" checked="checked" value="1">
</td>
<td id="GRD1_0_4" row="1" col="5" editable="1" parentid="0" style="width:78px;height:1.2em;white-space:nowrap;background-color:#FFFFFF;border-width:0px 1px 1px 1px;border-style:solid;border-color:#000000;padding: 0px 2px 0px 2px;text-align:left;cursor:pointer;">Commentary1</td>
</tr>
</tbody>
</table>
</div>
</div>
and this is how it looks when it is smaller ..
https://jsfiddle.net/mzue3j9t/1
Create it with just 1 table and make th inside thead position sticky.
<table>
<thead>
<tr>
<th style="background:threedface;position: sticky; top: 0;"></th>
...
</tr>
</thead>
<tbody>
<tr>
<td></td>
...
</tr>
...
</tbody>
</table>
I don't know why you are writing inline styles. Is it an email template?
else please create a separate css file and import it in the html.
I would suggest to clean up your code, remove the style tag from your HTML and create a CSS file for it. Doing that will allow you to debug the problem.
alternatively, I would suggest using some framework for tables which will render you work responsive to the page size, therefore no need to create different classes for each page size. I would use the Framework (https://getbootstrap.com/) however, there are other frameworks.

Two columns are not divided equally in Mailchimp advanced mode

I am creating a form with table in Mailchimp Advanced mode. I can't divide the 2 columns 50% - 50%. I don't know why the left column takes more space than the right.
.formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
margin: 22px;
padding: 10 15 10 15;
width: auto;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
padding: 5 5 15 5;
margin-left: auto;
margin-right: auto;
}
ul,li {
margin: 0;
padding: 0;
list-style: none;
}
body {
background-color: #FFFFFF;
font-family: verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
}
input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075);
}
<tr>
<td align="left" class="formLabel">Anrede <span class="req asterisk">*</span>
<br>
<div class="interestgroup_field radio-group" id="MERGE3">
<label class="radio" for="MERGE3-0">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label>
<label class="radio" for="MERGE3-1">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label>
<label class="radio" for="MERGE3-2">
<input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label>
</div>
<br>
<div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br>
<div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br>
<div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position
<br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br>
<div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span>
<br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br>
<div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
There are two things wrong with this code
You are missing the code to start and end a table <table width="100%" border="0" cellspacing="0" cellpadding="0"> and </table>
Your HTML closes before the the style tags.
Fix those two things and your form takes shape.
<html>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td colspan="2" align="left" class="formLabel">Anrede <span class="req asterisk">*</span><br>
<div class="interestgroup_field radio-group" id="MERGE3"> <label class="radio" for="MERGE3-0"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-0" value="Herr" class="av-radio"><span>Herr</span></label><label class="radio" for="MERGE3-1"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-1" value="Herr" class="av-radio"><span>Frau</span></label><label class="radio" for="MERGE3-2"><input type="radio" data-dojo-type="dijit/form/RadioButton" name="MERGE3" id="MERGE3-2" value="Dr" class="av-radio"><span>Dr</span></label> </div>
<br><div class="error">*|HTML:MMERGE3ERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Vorname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE1" id="MERGE1" size="35" value="*|MERGE1|*">
<br> <div class="error">*|HTML:FNAMEERROR|*</div>
</td>
<td align="left" class="formLabel">Nachname <span class="req asterisk">*</span><br>
<input type="text" name="MERGE2" id="MERGE2" size="35" value="*|MERGE2|*">
<br> <div class="error">*|HTML:LNAMEERROR|*</div>
</td>
</tr>
<tr>
<td align="left" class="formLabel">Position <br>
<input type="text" name="MERGE5" id="MERGE5" value="*|MERGE5|*">
<br> <div class="error">*|HTML:MMERGE5ERROR|*</div>
</td>
<td align="left" class="formLabel">Firma <span class="req asterisk">*</span><br>
<input type="text" name="MERGE6" id="MERGE6" value="*|MERGE6|*">
<br> <div class="error">*|HTML:MMERGE6ERROR|*</div>
</td>
</tr>
</tr>
</table>
<style> .formLabel {
vertical-align: top;
font-size: 14px;
color: #4d858d;
font-weight: bold;
text-align: left;
/*margin: 22px;
padding: 10 15 10 15;*/
width: auto;
border:1px solid #000000;
}
.container {
background-color: #FFFFFF;
width: 700px;
border: none;
/*padding: 5 5 15 5;*/
margin-left: auto;
margin-right: auto;
} ul,
li {
margin: 0;
padding: 0;
list-style: none;
} body {
background-color: #FFFFFF;
font-family:verdana;
font-size: 12px;
text-align: center;
min-width: 700px;
margin: 20 0 0 0;
} input[type="text"] {
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
font-size: 14px;
padding: 6 10 6 10;
box-sizing: border-box;
font-weight: normal;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
.select-small {
width: 100%;
height: 27;
webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #F5F5F5;
border-width: 0px;
border-style: solid;
width: 100%;
max-width: 100%;
box-shadow: 0 3px 0px rgba(0, 0, 0, 0.075); }
</style></html>
Let me know if this is what you were after.

CSS : Border in IE8

I have dialog with html :
<div id="sample">
<div class="sample-wraper">
<a class="modal_close" href="#"></a>
<form id="Form1" name="Form1" method="post">
<table id="tt">
<tr align="center">
<td colspan="2" id="naam"><b>Cha test</b></td>
</tr>
<tr>
<td colspan="2">
<div id="boodschap" class="text" style="border-right: 1px solid; border-top: 1px solid; overflow: auto;
border-left: 1px solid; width: 468px; height: 182px; border-bottom: 1px solid;
background-color: white">njnknkkm</div>
</td>
</tr>
<tr>
<td colspan="2">
<textarea id="antwoord" name="antwoord" class="text"
style="width: 465px; height: 182px; border-width: 1px; border-style: solid; border-color: black;"
onkeydown="textCounter(antwoord,aantal,1000)"
onkeyup="textCounter(antwoord,aantal,1000)"></textarea>
</td>
</tr>
<tr>
<td class="text" align="left" width="210">
Caráters permitidas
<input readonly type="text" name="aantal" size="3" maxlength="4" value="1000" id="aantal"></td>
<td align="right">
<input id="Submit" name="Submit" type="button" value="Enviar" onclick="submitForm();"
class="button" style="width: 130px">
</td>
</tr>
</table>
<input id="IdTo" name="IdTo" type="hidden">
</form>
</div>
and css like this :
#sample {
background: none repeat scroll 0 0 #FFFFFF;
border-radius: 5px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.7);
border: 1px solid;
display: none;
padding: 15px 10px 10px;
position:absolute !important;
}
.modal_close {
background: url("Close-icon-download-182005456677-png/button.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0);
filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Close-icon-download-182005456677-png/button.png',sizingMethod='scale');
-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='Close-icon-download-182005456677-png/button.png',sizingMethod='scale')";
display: block;
height: 20px;
position: absolute;
right: 10px;
top: 10px;
width: 20px;
z-index: 2;
}
Problem is that in IE8 on this dialog in top-left corner i get some square, which disappears if i remove border from dialog (#sample).
http://clip2net.com/s/i6klpi (sample of problem)
In IE7 and IE9 i didn't get this "feature" in corner.
I found this post about problem with IE borders http://www.brasee.com/displayPost.htm?postId=64. As my dialog is with position absolute (this is for not moving dialog when scrolls) i add wrapper of this dialog. So i set for dialog position relative and for wrapper position absolute. But this also didn't help. Get this result: clip2net.com/s/i6lcKz

Stylize only input text fields of table rows with differrent colours

I would like to stylize every row input text field with different colour per row, following the schema of :odd :even pseudo classes. The problem is that the nth-of-child(N) doesn't provide me the correct result. It rather make all input field with the same colour. Please advise!
input[type=text]:nth-last-child(even){
width:150px;
display:block;
background:#ccc;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
input[type=text]:nth-last-child(odd){
width:150px;
display:block;
background:#0F9;
border: 1px solid #999;
height: 25px;
-webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);
}
AND THE HTML CODE :
<form name="form1" method="post" action="" >
<table width="500" border="0" cellspacing="1" cellpadding="0">
<?php while ($rows = mysql_fetch_array($result)) : ?>
<tr>
<td align="center">
<?php
$id[] = $rows['id'];
echo $rows['id'];
?>
<input type="hidden" name="id[]" value="<?php echo $rows['id']; ?>" />
</td>
<td align="center">
<input name="name[]" type="text" id="name" value="<?php echo $rows['name']; ?>" />
</td>
<td align="center">
<input name="lastname[]" type="text" id="lastname" value="<?php echo $rows['lastname']; ?>" />
</td>
<td align="center">
<input name="email[]" type="text" id="email" value="<?php echo $rows['email']; ?>" />
</td>
</tr>
<?php endwhile; ?>
<tr>
<td colspan="4" align="center"><input type="submit" name="submit1" value="ΕΝΗΜΕΡΩΣΗ"></td>
</tr>
</table>
</td>
</tr>
</table>
</form>
Set the :nth-child(even) on the <td>, not on your <input>. In your code the <input> is always the first child because it is wrapped inside a <td>.
Example:
td:nth-last-child(even) input[type=text]{
background:#ccc;
}
Fiddle:
http://jsfiddle.net/sfpK8/3/
Your inputs are placed in a <td>, so input[type=text]:nth-last-child(even) triggers just once on a one input.
Do it in that way:
td:nth-child(even) input[type=text] {
//your styles for even
}
Also you don't have to apply styles to odd elements, just make default styles for all inputs, and then add styles for even:
input[type=text] {
//style#1
}
td:nth-child(even) input[type=text] {
//style#2
}