CSS- Coloured cox inside form field - css

Question

I am a newbie but pretty good at CSS, But i can not seem to get my head around doing the following:
It is the box and background, that is confusing me. The rest i am perfecting fine with. Any pointers would be very helpful. I know bootstrap have a similar plugin, but i find bootstrap a nightmare to use.
I have tired countless of ridiculous things, i am to embarrassed to show, thought is is about time i ask the pro's.
input[type=text]{
background-color: linear-gradient(90deg, #FFC0CB 50%, #00FFFF 50%);
color: black;
}
input[type=text]{
background-color: red;
color: aqua;
background-size: 20%;
}
HTML
<div id="section_left">
<form id="franchiseDets" action ="Franchise-Details.php" method="POST">
<!-- franchise details form-->
<div class="field">
<input type="text" name="fran_name" id="fran_name" value="<?php echo $_SESSION['fran_name']; ?>" placeholder="e.g One Delivery Leeds" pattern="[a-zA-Z]"
autofocus required tabindex="1">
<br>
<input type="email" name="fran_email" id="fran_email" value="<?php echo $_SESSION['fran_email'] ?> ' <?php echo $disabled ?>" placeholder="leeds#one-delivery.co.uk" required tabindex="2">
<br>
<input type="text" name="mang_name" id="mang_name" value="<?php echo $_SESSION['mang_name']; ?>" placeholder="Joe Blogs" required tabindex="3">
<br>
These are last two ridiculous things i have tired

Answer 1

Here is a method I would usually use.
Pure CSS and semantics :)
HTML
<fieldset class="example">
<input type="text" placeholder="Phone" />
</fieldset>
CSS
fieldset.example {
position: relative;
}
fieldset.example,
fieldset.example:before,
fieldset.example input {
height: 33px;
padding: 0;
border-width: 0;
/* remove default border */
}
fieldset.example input {
border: 1px solid red;
border-left: 0px;
padding-left: 5px;
border-radius: 0 5px 5px 0;
}
fieldset.example:before {
content: "\0260E";
width: 30px;
border: 1px solid red;
display: inline-block;
float: left;
position: relative;
background: red;
color: white;
text-align: center;
line-height: 33px;
border-radius: 5px 0 0 5px;
}
LIVE EXAMPLE
http://codepen.io/KarlDoyle/pen/grRrwG

Answer 2

This is how I would have solved it with less code as comment suggested:
(Do not evauluate the design)
.input-field {
/* And border and so on... */
background-color: #f00;
box-sizing: border-box;
padding-left: 2em;
position: relative;
}
.input-field:before {
content: "X"; /* Use this if the icon comes from a font,
or relpace it with a space and then use the background-image property */
position: absolute;
left: 0;
width: 2em; /* Just to center the padding */
text-align: center;
font-size: 1em; /* For the scalability */
}
.input-field > input {
width: 100%;
font-size: 1em;
}
/* This is just for play, to test the scaleability */
.fill-row {
width: 100%;
}
.big {
font-size: 2em;
}
.short {
max-width: 160px;
}
<div class="input-field fill-row">
<input />
</div>
<div class="input-field big short">
<input />
</div>
<div class="input-field short">
<input />
</div>