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

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>

victor · Accepted Answer · 2014-09-17 03:16:56Z

4

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;
}

edited Sep 17, 2014 at 3:16

answered Sep 17, 2014 at 3:11

victor

1,5821 gold badge15 silver badges35 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Splash Over a year ago

Thanks, so is there a way to minimize the chapter input box to just enough, since the value is a readonly already set?

victor Over a year ago

Yes, there is, but the style can't change dynamically just via CSS, you would have to use script, if that's ok

victor Over a year ago

You can use the size attribute of inputs to adjust their size too if you know what range of values you will be dealing with

j08691 · Accepted Answer · 2014-09-17 02:57:21Z

1

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>

answered Sep 17, 2014 at 2:57

j08691

208k33 gold badges269 silver badges281 bronze badges

Comments

Bien Holmes · Accepted Answer · 2014-09-17 03:36:56Z

0

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>

edited Sep 17, 2014 at 3:36

answered Sep 17, 2014 at 3:06

Bien Holmes

31 silver badge3 bronze badges

2 Comments

Splash Over a year ago

I put in the fiddle and it didn't work like you said?

j08691 Over a year ago

Your CSS syntax is invalid.

Heta · Accepted Answer · 2014-09-17 03:38:57Z

0

<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>

answered Sep 17, 2014 at 3:38

Heta

753 bronze badges

Collectives™ on Stack Overflow

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

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related