How to have different input text styles in same html form? - html

Question

I would like to show a form with submit button, to post the texts fields back to server with:
a text input called title, with border
text called chapter and section no border, and their should be assigned in JavaScript
I want chapter/section not modifiable and short. But Title is a normal input and should be very close to the word Title, like:
Chapter 3 Section 4
_____________
Title |_____________|
I wrote CSS like "input[type="notext"]{border: none} then either both text inputs have border, or none has border. I basically want the two inputs to have different style, or some other kind of field for chapter/section for me to set value is fine too. So how to achieve this? Don't need to be compatible for IE8 and before.
input[type="text"]{
border: none;
font-size: 16px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>

Answer 1

You can define a CSS class for your inputs and just use them.
For inputs with class example:
input.example {
border: none;
font-size: 16px;
}
Use it like this:
<input class="example" type="text" value="3" name="cha_n" readonly/>
Example: http://jsfiddle.net/x762v24a/
A less generic way to achieve this is to use CSS attribute selector:
input[name="cha_n"] {
border: none;
}

Answer 2

To remove the borders on the chapter and section inputs, use:
input[readonly] {
border:none;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" readonly/></td>
<td>Section <input type="text" value="4" name="sec" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" name="title" id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>

Answer 3

Try to give inputs having the same style an 'class' attribute,then :
.style1
{
border = 0px solid #FFFFFF;
}
.style2
{
margin = 0px;
padding = 0px;
border = 1px;
}
<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" class="style1" readonly/></td>
<td>Section <input type="text" value="4" name="sec" class="style1" readonly/></td>
</tr>
<tr>
<td>Title </td>
<td><input type="text" style="inputtext" class="style2" name="title"id="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>

Answer 4

<form action="#" method="post" id="form" >
<table>
<tr>
<td>Chapter<input type="text" value="3" name="cha_n" /></td>
<td>Section <input type="text" value="4" name="sec" /></td>
</tr>
<tr>
<td>Title</td>
<td><input type="text" style="border:none;font-size:14px;" name="title"/></td>
</tr>
<tr>
<td span='2'><a id="submit" href="javascript: check()">Send</a></td>
</tr>
</table>
</form>