Here is the ASP.Net MVC2 code that I use to display a textbox input.
<div id="blackbar">
<p>Sistema de Evaluaciones de Docentes</p>
<%: Html.TextBox("termino","") %>
<img src="../../Content/search.png" alt="search" />
</div>
Here is how it renders:
<div id="blackbar">
<p>Sistema de Evaluaciones de Docentes</p>
<input id="termino" name="termino" type="text" value="" />
<img src="../../Content/search.png" alt="search" />
</div>
How would I use CSS for example to give the textbox a red border? How can I tell MVC2 to give this text input a class or something?
EDIT:
I've tried the following, but the text I write into the input isn't green.
.textinput
{
color:Green;
}
<%: Html.TextBox("termino", "", new { #class = "textinput" })%>
<%=Html.TextBox("termino", "", new { #class = "redborder" }) %>
#termino { border: solid 1px #F00; }
input[name=termino],
input#termino,
#termino
{
border: 1px solid #f00;
}
To style all text boxes in the blackbar div you can use:
#blackbar input[type='text'] { ... }
Related
Hello i cant make this work, im making an embed sender with my bot on dashbaord, and i cant make color input good, when i put height auto its broken. I want it to look like a discord embed.
The color on embed isnt going to the bottom. The color cant be fixed cause theres textarea and if it we resize it then its not gonna go to the bottom. Also textarea must be resiable.
Image
HTML (ejs):
<html>
<body>
<div class="mainBoxDash">
<div class="settings">
<form method="POST">
<div class="customEmbed2">
<p class="changeEmbedSettings">Change all embed settings down below</p>
<div class="lineWelcome"></div>
<img class="embedImageBot" src="<%= bot.user.avatarURL()%>" alt="">
<p class="botName"><%= bot.user.username%></p>
<img class="botTag" src="https://cdn3.emoji.gg/emojis/bot.png" alt="">
<div class="embed">
<input type="color" id="embedColor" class="embedColor" accept="hex" name="embedColor" value="#0076ff">
<%- guild.icon ? `<img src="https://cdn.discordapp.com/icons/${guild.id}/${guild.icon}" class="authorImage">` : `<img src="https://maki.gg/static/app-assets/images/portrait/default.png" class="authorImage">` %>
<input class="authorName" name="authorName" maxlength="100" value="<%= guild.name %>">
<textarea name="descriptionBot" id="descriptionBot" class="descriptionBot" maxlength="4096" required="required">Embed Description</textarea>
<input class="footerName" name="footerName" maxlength="32" value="<%= bot.user.username %> • <%= new Date().getFullYear();%>">
</div>
<div class="invisibleEmbed"></div>
</div>
<button type="submit" class="saveSettings">
<p class="saveText">Send Embed</p>
</button>
</form>
</div>
<%- include('footer'); -%>
</div>
</body>
</html>
CSS:
.embed{
background-color: #2f3136;
width: 70%;
height: auto;
margin-left: 85px;
margin-top: 5px;
border-radius: 5px;
}
input[type="color"] {
-webkit-appearance: none;
border: none;
width: 3px;
height: auto;
}
input[type="color"]::-webkit-color-swatch-wrapper {
padding: 0;
}
input[type="color"]::-webkit-color-swatch {
border: none;
}
I want to display an html with an input type=image.
I use a base64 svg string for the image.
When setting the src within the input attribute src - it works fine (btn1).
When setting the src via external css and setting image class, it doesn't work.
I Tried 2 different options btn2,bt3.
<html>
<style>
.img2 {
src: "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==";
}
.img3 {
src: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
</body>
</html>
Please advise.
The <img> src attribute is not a property that you can style with CSS.
If you really need to style the button with CSS, you could do it this way:
It involves using a pseudo-element to cover up the contents of the <input> and setting its background to the SVG image.
It's a bit hacky, as it requires that you know in advance what the background colour behind the imput element is. And it'll almost certainly need to be a solid colour.
#imgBtn2, #imgBtn3
{
position: relative;
width: 24px;
height: 24px;
color: transparent; /* hide alt text */
}
#imgBtn2::before, #imgBtn3::before
{
content: '';
display: block;
width: 24px;
height: 24px;
position: absolute;
background-color: white;
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==" alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for="imgBtn2">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3">btn3 - by css class</label>
Update
If you don't need an <input type="image/> then I would suggest just using a <button> element. Then you can just style the background.
Here we separate out the button styling from the CSS class for the button icon. So if you have buttons of the same type with different icons, you can reuse class imgButton and just give it a different icon class.
.imgBtn
{
border: none;
width: 24px;
height: 24px;
background-color: transparent;
}
.reload
{
background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==");
}
<button type="button" class="imgBtn reload"/>
Since CSS is not a must, then javascript is here to do the job.
example , setting your dataUri inside an array and and a loop on your inputs to update the src attribute:
// set an array with each of your dataUris
const img =new Array ('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==' ,
' data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==',
'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg==');
// reset src attributes from dataUri stored in img()
let myIpts =document.querySelectorAll('input[id^="imgBtn"]');
for (i = 0; i < myIpts.length; i++) {
myIpts[i].setAttribute('src', img[i] );
}
<html>
<style>
</style>
<body>
<input id="imgBtn1" type="image" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItcmVmcmVzaC1jY3ciPjxwb2x5bGluZSBwb2ludHM9IjEgNCAxIDEwIDcgMTAiPjwvcG9seWxpbmU+PHBvbHlsaW5lIHBvaW50cz0iMjMgMjAgMjMgMTQgMTcgMTQiPjwvcG9seWxpbmU+PHBhdGggZD0iTTIwLjQ5IDlBOSA5IDAgMCAwIDUuNjQgNS42NEwxIDEwbTIyIDRsLTQuNjQgNC4zNkE5IDkgMCAwIDEgMy41MSAxNSI+PC9wYXRoPjwvc3ZnPg=="
alt="Opss">
<label for="imgBtn1">btn1 - att src</label>
<br>
<input id="imgBtn2" type="image" class="img2" alt="Opss">
<label for=" imgBtn2 ">btn2 - by css class</label>
<br>
<input id="imgBtn3" type="image" class="img3" alt="Opss">
<label for="imgBtn3 ">btn3 - by css class</label>
</body>
</html>
I have to style an input control based on the select box's class. If select box has a class "error", then I need a red border on the input control. How can I do that with SASS ? There is no common wrap, only one thing is that the wrap of the input control (.select-input-wrap) is adjecent to select box. Here is the DOM structure.
<select class="form-select error"></select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
You need to style a sibling element, try the below code in your SASS file.
$red: #f00;
.error {
&.form-select {
+ .select-input-wrap {
> .select-input {
border: 1px solid $red;
}
}
}
}
In pure CSS (and so in SASS), you can target sibling elements using the + operator. For instance:
.form-select.error + .select-input-wrap input {
border: 3px solid red;
}
Related sandbox: http://www.cssdesk.com/r8Dh8
If your select and div elements share a parent, you can style based on that:
.parent .error + .select-input-wrap input {
border: 1px solid red;
}
<div class="parent">
<select id="some-sel" class="form-select error"> </select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
<select id="another-sel" class="form-select"> </select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
</div>
For the SASS version, just take out the extra punctuation!
This is a css solution. Hope you can convert to sass structure.
.error~.select-input-wrap input{
border: solid 1px red;
}
<select class="form-select error"></select>
<div class="select-input-wrap">
<input class="select-input" name="select-input" />
</div>
I have these form with style inline, but I can't use it in css because it changes all my code when I reference css in another views:
<style>
body {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
}
.form-login {
background-color: #EDEDED;
padding-top: 10px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
border-radius: 15px;
border-color:#d2d2d2;
border-width: 5px;
box-shadow:0 1px 0 #cfcfcf;
opacity: 0.8;
}
h4 {
border:0 solid #fff;
border-bottom-width:1px;
padding-bottom:10px;
text-align: center;
}
.form-control {
border-radius: 10px;
}
.wrapper {
text-align: center;
}
</style>
#using (Html.BeginForm("Login", "Account", new { ReturnUrl = ViewBag.ReturnUrl }, FormMethod.Post, new { #class = "form-horizontal", role = "form" }))
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true, "", new { #class = "text-danger" })
<div class="container" style="margin-top:40px">
<div class="row">
<div class="col-sm-6 col-md-4 col-md-offset-4">
<div class="panel panel-default form-login">
<div class="panel-heading">
<strong> Press to continue</strong>
</div>
<div class="panel-body">
<form role="form" action="#" method="POST">
<fieldset>
<div class="row">
</div>
<div class="row">
<div class="col-sm-12 col-md-10 col-md-offset-1 ">
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-user"></i>
</span>
#Html.TextBoxFor(m => m.Email, new { #class = "form-control has-success", #autofocus = "autofocus", placeholder = "Usuario", required = "required" })
#Html.ValidationMessageFor(m => m.Email, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<div class="input-group">
<span class="input-group-addon">
<i class="glyphicon glyphicon-lock"></i>
</span>
#Html.TextBoxFor(m => m.Password, new { #class = "form-control has-success", placeholder = "Password", type = "password", required = "required" })
#Html.ValidationMessageFor(m => m.Password, "", new { #class = "text-danger" })
</div>
</div>
<div class="form-group">
<button class="btn btn-lg btn-primary btn-block" type="submit">Login</button>
</div>
<p>#Html.ActionLink("Return to home page", "Index", "Home")</p>
</div>
</div>
</fieldset>
</form>
</div>
</div>
</div>
</div>
</div>
I think the problem is if I send body class to css it changes on all pages I reference css, how can I change to only change in this view? Regards
Instead of changing in file, you may add style in page through tag or give inline style with style element if you need change only at one place.
But adding inline style should be avoided.
Better to differentiate your element with a id and give properties to it
In that case you can save above inline CSS into separate CSS file and import that css file to that HTML page where you want this CSS.
Add the background to container, or add another class to the container and apply the style. and change margin-top to padding-top
.container {
background: url('http://digitalresult.com/') fixed;
background-size: cover;
padding: 0;
margin: 0;
height: 100vh;
padding-top:40px;
}
you can create a CSS file with the styles you mentioned in your view and import that file only in this view which will solve your problem.
I need to change the background color of a span using css when an input field in another span is focused.
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
Here is the css:
.one
{ background-color: red; }
I tried doing this:
.two:focus + .one
{background-color-black;}
but its not working.
Any help would be appreciated.
Thanks!
you can use :focus-within,
It worked for me.
This is a document https://developer.mozilla.org/en-US/docs/Web/CSS/:focus-within
.one { float: left; }
input { margin: 0 0 0 5px; }
.some:focus-within .one { background: red; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname"> </span>
</p>
If you do not mind elements order, try this snippet:
.one { float: left; }
input[name="fname"] { margin: 0 0 0 5px; }
input[name="fname"]:focus + .one { background: khaki; }
<p class="some">
<input type="text" name="fname"/>
<span class="one">Name</span>
</p>
Here is a fiddle
Using javascript:
Html:
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="changeColor()"> </span>
</p>
Javascript:
<script type="text/javascript">
function changeColor() {
document.getElementsByClassName("one")[0].style.backgroundColor="black";
}
</script>
Css:
.one
{ background-color: red; }
Another javascript solution, using classes, and also handles the input loosing focus:
function getFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className + " one-focused";
}
function looseFocus() {
var one = document.getElementsByClassName("one")[0];
one.className = one.className.replace("one-focused", "");
}
.one { background-color: red; }
.one-focused { background-color: black; }
<p class="some">
<span class="one">Name</span>
<span class="two"> <input type="text" name="fname" onfocus="getFocus()" onblur="looseFocus()"> </span>
</p>
This has some fairly obvious flaws, but works in this case. You may want to loop through all classes, or use id's instead of classes. If you are using jQuery then this becomes slightly simpler, but I have left this using standard javascript and only changing the background of the first element in the document.