Question

I’m trying to obtain a text input visual element that to look unitary but to have two parts arranged horizontally, with different behaviors. The one from the left would have to be read only, while the one from the left should be editable.

Any suggestion about how can this be done?

Answer 1

You can just place two inputs next to each other and style them appropriately. Example jsfiddle at http://jsfiddle.net/xvKCH/1/.

<input type='text' readonly class='readonly'></input><input type='text' class='writable'></input>​

input {
    display: inline;
    width: 100px;
    margin: 0;
    padding: 0;
    border: 1px solid black;      
}

.readonly {
    border-right: 0;
}

.writable {
    border-left: 0;
}​