How to handle two type input box?

html, input

Solution

You can try mix two inputs to look like one as @DoeNietZoMoeilijk proposed.

You can achieve it by HTML and CSS, try this:

HTML:

<input type="text" value="Read only" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />

CSS:

#first {
    border-right: none;
}

#second {
    border-left: none;
    margin-left: -5px;
}

Here is example in jsfiddle

And here is example snippet:

#first {
    border-right: none;
}

#second {
    border-left: none;
    margin-left: -5px;
}

<input type="text" value="This is read only part" id="first" readonly="readonly" />
<input type="text" value="Editable" id="second" />

Problem

How to create a input box that with 2 parts that 1st part not editable with default text and rest of that editable by user. `<input type='text' value='read only'><input type='text' value='editable>` Mix 2 input in 1 input.

Original source