I'm using Bootstrap 3 and have issues with a table inside an iFrame or any contents. I want the iFrame contents to be treated as part of the page.
I've already removed the iFrame borders just to be clear.
So for instance if the iFrame is 1000 pixels in width the contents inner page width should also be 1000px # 100%.
I am using Bootstrap 3.
As you can see in the example, the iFrame has a scrollbar as it thinks its page size is 1920 width.
<?php if(login_check($mysqli)==true): ?>
<body>
<div class="row-fluid">
<div class="col-md-4">
<h3>Clients</h3>
</div>
<div class="col-md-8">
<select>
<option value="name">First Name</option>
<option value="surname">Surname</option>
<option value="company">Company</option>
<option value="date">Date</option>
</select>
</div>
<div class="col-md-12">
<table id ="example" class="table table-striped table-bordered">
<thead>
<tr>
<th>Account</th>
<th>Name</th>
<th>Surname</th>
<th>Phone</th>
<th>Unit</th>
<th>Street</th>
<th>type</th>
<th>Suburb</th>
<th>Date</th>
</tr>
</thead>
<tbody>
<?php
$clients_list = "SELECT * FROM clients_table";
$details = $mysqli->query($clients_list);
while($row = mysqli_fetch_array($details)) {
echo '
<tr>
<td><input type="text" value="'.$row['_account'].'" id="_account'.$row['_account'].'" readonly="readonly"/></td>
<td><input type="text" value="'.$row['_first'].' " id="_first'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_surname'].'"id="_surname'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_phone'].'"id="_phone'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_unit'].'" id="_unit'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_street'].'" id="_street'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_type'].'" id="_type'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_suburb'].'"id="_suburb'.$row['_id'].'"/></td>
<td><input type="text" value="'.$row['_email'].'"id="_email'.$row['_id'].'"/></td>
</tr>';
}
?>
</tbody>
</table>
</div>
</div>
This is the code for that in bootstrap.css
Please try it.
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
#media screen and (max-width: 767px) {
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
As far as i know if the page that is being loaded in your iframe is responsive then you will have no problem at all.
So if you set height & width at 100% then it will "fit" exactly in the iframe, making it look like part of your primary webpage.
Related
I want to make my table responsive for the application i am using. I have tried all different approach like making it scroll as the window size decreases. But i want to have a approach where the table squeezes or squishes to fit the size of the window. Please find my code. hope i find an answer soon!
.buttonListContainer {
position: fixed;
top: 8.2%;
}
.buttonlistcontext {
position: fixed;
border: 0.1px solid #ddd;
margin-top: 1px;
background-color: transparent;
margin: 0;
padding: 0;
top: 0;
left: 0;
}
<div class="buttonListContainer" style="overflow:auto;margin-top:0;">
<table id="buttonList" class="buttonlistcontext" style="visibility:hidden;">
<tr>
<!-- the spike count -->
<td>
<font size="2">Eventcount</font>: <input type="text" id="EventCount" style="width:40px;text-align:center;" disabled></td>
<td><button style="cursor:pointer" onclick="reset()"><font size="2">Reset</font></button></td>
<!-- the jump to very beginning button -->
<td><input type="image" id="btn01" style="height:15px;width:15px;" src="images/play_first.png" onclick="jump_firstFrame();" />
<!-- the play back button -->
<input type="image" id="btn02" style="height:15px;width:15px;" src="images/play_back2.png" onclick="playBack();" />
<!-- the go back button -->
<input type="image" id="btn03" style="height:15px;width:15px;" src="images/play_back.png" onclick="go_back();" />
<!-- the stop button -->
<input type="image" id="btn07" style="height:15px;width:15px;" src="images/stop.png" onclick="animationFlag = 0; cancelAnimationFrame(myAnimation);" />
<!-- the go forward button -->
<input type="image" id="btn04" style="height:15px;width:15px;" src="images/play_fwd.png" onclick="go_forward();" />
<!-- the play forward button -->
<input type="image" id="btn05" style="height:15px;width:15px;" src="images/play_forward2.png" onclick="play();" />
<!-- the jump to last button -->
<input type="image" id="btn06" style="height:15px;width:15px;" src="images/play_last.png" onclick="jump_lastFrame();" /></td>
<!-- the speed buttons -->
<td>
<font size="2">Speed</font>: x<select name="PlaySpeed" id="PlaySpeed" onchange="Speed(this.value);">
<option value= "1">1</option>
<option value= "5">5</option>
<option value= "10" selected="selected">10</option>
<option value= "50">50</option>
<option value= "100">100</option>
<option value= "200">200</option>
</select>
</td>
<!-- Wall color drop-down list -->
<td>
<font size="2">Wall color</font>: <select id="WallColor" style="background-color: #CCFFCC" onchange="wallColor(this.value);">
<option value="1" style="background-color: #F0F0F0">Silver gray</option>
<option value="2" style="background-color: #CCFFCC" selected="selected">Mint green</option>
<option value="3" style="background-color: #FCFBE3">Vanilla cream</option>
<option value="4" style="background-color: #d5e8f4">Water blue</option>
</select>
</td>
<!-- the scale up button -->
<td>
<font size="2">Sensitivity</font>: </td>
<td><input type="image" id="btn08" style="height:15px;width:15px;" src="images/scale_up.png" onclick="sensitivity_Up();" /></td>
<td><input type="image" id="btn09" style="height:15px;width:15px;" src="images/scale_down.png" onclick="sensitivity_Down();" /></td>
<!-- the Montage buttons -->
<td>
<font size="2">Montage</font>: <select name="MontageSwap" id="MontageSwap" onchange="montageSwap(this.value);">
<option value= "1" selected="selected">Common Average</option>
<option value= "2">CII</option>
<option value= "3">Bipolar</option>
</select>
</td>
<td>
<!-- <button id="filterBtn" style = "cursor:pointer" onclick="filter()" ><font size="2">Filter</font></button> -->
<a href="javascript:void(0)" onclick="filter()">
<font size="2">Filter</font>
</a>
</td>
<!-- the line cursor -->
<td><input type="checkbox" id="LineCursor" onclick="lineCursorFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Line cursor</font>
</td>
<!-- the pink bars -->
<td><input type="checkbox" id="BGbar" onclick="BGbarFlag=this.checked;draw_TeeChart()" checked/>
<font size="2">Highlights</font>
</td>
<!-- the Time interval -->
<td>
<font size="2">Time interval</font>: <select name="TimeInterval" id="timeIntervalSelect" onchange="timeInterval=this.value*fs;draw_TeeChart()">
<option value= 5>5 sec</option>
<option value= 10 selected="selected">10 sec</option>
<option value= 20>20 sec</option>
</select>
</td>
<td>
<button id="modalBtn-pre" style="cursor:pointer" onclick="CGI()"><font size="2">Pre-annotation</font></button>
</td>
</tr>
</table>
</div>
You could take a look at adding bootstrap to your project. This could save you a lot of time and effort. Bootstrap is awesome for writing responsive code.
If you have added bootstrap, just do the following to achieve your table effect on mobile:
<div class="table-responsive">
<table class="table">
....
<table>
</div>
That will give you a scrollable table on mobile. If you do not want to go the bootstrap route, you could try the following with the HTML above:
<style>
#media screen and (max-width: 767px){
.table-responsive {
width: 100%;
margin-bottom: 15px;
overflow-y: hidden;
-ms-overflow-style: -ms-autohiding-scrollbar;
border: 1px solid #ddd;
}
}
.table-responsive {
min-height: .01%;
overflow-x: auto;
}
.table{
width: 100%;
max-width: 100%;
}
</style>
That should do the trick. Check out this plunkr.
But really take a look at adding bootstrap.
Well, to make it responsive, you need to do major re-design, using bootstrap, or flexbox, or something else.
But you still can have a responsive table. Add the following code to your CSS, should work:
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
}
If you don't like how it looks like and still want to maintain the table layout for desktop and have something responsive for mobile, here's another trick. You have the normal table layout for desktop, and for mobiles and desktops with less than 900 pixels window width it will be stacked vertically:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: block;
}
}
EDIT: For "squish" effect, you can do it like this:
#media (max-width: 900px) {
table {
display: block;
}
tr {
display: block;
}
td {
display: inline-block;
width: 32%;/* to have 3 columns */
}
}
Edit 2: Here's a demo using the last edit. 2 things to notice:
Added box-sizing: border-box; to the "td".
Since we're using "display: inline-block;", for the inline-block to work as desired, all white-spaces between "td"s must be removed. Here's an example:
This:
<td>
cell1
</td>
<td>
cell2
</td>
Should be changed to:
<td>
cell1
</td><td>
cell2
</td>
I have a form and all inputs are set inside table td, I use text input and bootstrap-select in table row.
All inputs are displayed properly with normal resolution in system.
The display size of text inputs gets reduce when I view that in lower resolution or zoom but bootstrap select does not reduce beyond title text or option text and remains the same.
Also table row width remains same, i.e it tries to fit into screen width instead of expanding with scroll beyond screen width.
I want text input not to reduce display size.
following is my code please help on fixing this.
<div class="span6">
<table id="target-tables"
class="table table-responsive table-striped table-bordered table-hover no-margin no-border">
<thead>
<tr>
<th class="no-border" >Title1</th>
<th class="no-border" >Title2</th>
<th class="no-border" >Title3</th>
<th class="no-border" >Title4</th>
<th class="no-border" >Title5</th>
<th class="no-border" >Title6</th>
<th class="no-border" >Title7</th>
<th class="no-border" >Title8</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title='Select a database' >
<option value=".....">......</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md"/>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" multiple title="........." >
<option value="......">.....</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<input type="text" class="form-element form-control input-md" />
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" title="........." >
<option value="...">........</option>
</select>
</div>
</td>
<td>
<div class="col-xs-12 nopadding">
<select class="selectpicker form-element" >
<option value="......">........</option>
</select>
</div>
</td>
</tr>
</tbody>
</table>
Your .table needs to be nested INSIDE a .table-responsive class as per Bootstrap's documentation:
Responsive tables Create responsive tables by wrapping any .table in
.table-responsive to make them scroll horizontally on small devices
(under 768px). When viewing on anything larger than 768px wide, you
will not see any difference in these tables.
You have the .table-responsive in the same element as the .table.
I have two rows within a HTML table. Here is a simplified view of it:
#topTextbox {
width: 98%;
}
#bottomTextbox {
width: 693px;
}
<table>
<tr>
<td>
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
The first row has one long textbox and the second row has a dropdown and a textbox. I am trying to get it so these line up with the same total width. The issue is that as new data comes into the dropdown the width will change so I am trying to figure out the correct css on the bottom textbox so it lines up on the right side with the top textbox.
Here is what it looks like in Firefox:
Here is what it looks like in IE:
So I have an issue today that they don't line up across browsers as well as the fact that this will get worse as items are added to the dropdown (since the bottom has a fixed width).
What is the correct way to keep these textboxes aligned on the right no matter how big the overall table gets as well as new items are added to the dropdown?
This the following approach involves CSS3 box-sizing and calc(). It works fine on IE9+ and all modern browsers.
table {
width: 100%;
}
input,
select {
box-sizing: border-box;
display: inline-block;
}
#topTextbox {
width: 100%;
}
select {
width: calc(30% - 4px);
/* why 4px? http://stackoverflow.com/q/5078239/483779 */
}
#bottomTextbox {
width: 70%;
}
<table>
<tr>
<td>
<input type="text" id="topTextbox" />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type="text" id="bottomTextbox" />
</td>
</tr>
</table>
Try somthing like this
<table>
<tr>
<td colspan="2">
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td style="width: 100%;">
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
CSS
table {
width: 98%;
}
input {
width: 100%;
}
select{
width: 150px;/**may be**/
}
SEE DEMO http://jsfiddle.net/JentiDabhi/dq3g5k3j/
The following does the asked behavior, but it is made with flexbox instead of table. I decided to post it since it might be helpful.
It is achievable in flexbox with flex-shrink; check the following snippet:
var j = 3;
document.querySelector("button").addEventListener("click", function () {
var opt = document.createElement("option"),
i;
for (i = 0; i < j; i += 1) {
opt.innerHTML += "123456789";
}
j += 1;
document.querySelector("select").appendChild(opt);
});
.container {
width: 98%;
}
.here {
display: flex;
}
.select { flex-shrink: 0; width: auto; }
.input { flex-shrink: 1; width: 100%; }
select, input { width: 100%; }
<div class="container">
<div>
<input type="text" id="topTextbox" />
</div>
<div class="here">
<div class='select'>
<select>
<option></option>
<option>123456789</option>
<option>123456789123456789</option>
</select>
</div>
<div class='input'>
<input type="text" id="bottomTextbox" />
</div>
</div>
</div>
<hr></hr>
<button>Add longer option value</button>
A responsive solution:
By adapting the markup with a div-tag around the text input and a little CSS, it will fill automatically the whole width (unless the select-box fills the table cell).
<table>
<tr>
<td><input type="text" id="topTextbox" /></td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<div><input type="text" id="bottomTextbox" /></div>
</td>
</tr>
</table>
CSS Style:
table{
width: 100%; /* your custom width */
}
input{
box-sizing: border-box;
width: 100%;
overflow: hidden;
clear: none;
}
select{
float: left;
margin-right: 5px; /* your custom margin */
}
div{
overflow: hidden;
}
See the JSFiddle.
This will work also when filling up the select-box dynamically.
i think cellspacing and cellpadding properties should be set for the TABLE tag, and then you can use margin or padding css properties that apply to INPUT and SELECT tags.
furthermore, for the cross-browserness, fixed widths work fine.
Example HTML code:
<table cellspacing="0" cellpadding="0">
<tr>
<td colspan="2">
<input type=text id=topTextbox style="width: 600px" />
</td>
</tr>
<tr>
<td>
<select style="width: 200px">
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td >
<input type=text id=bottomTextbox style="width:400px" />
</td>
</tr>
Try use box-sizing like #Pete Suggestion:
#topTextbox,#bottomTextbox{
width: 100%;
box-sizing: border-box;
}
I tested this out in both Chrome and IE. It seems to work properly. Personally, I don't like using values that aren't percentages. However, this comes up well.
http://jsfiddle.net/7sk6p3ex/
<html>
<head>
<style>
.top{width: 300px;}
.bottom{width: 148px;}/* The space between select & input = 4px */
</style>
</head>
<body>
<table style="width: 100%;">
<tr>
<td><input class="top" type="text" id="topTextbox"></td>
</tr>
<tr>
<td>
<select class="bottom">
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input class="bottom" type="text" id="bottomTextbox">
</td>
</tr>
</table>
</body>
</html>
Simulate a nested table, get table-like layout behavior
If you can modify the HTML markup, you can achieve the desired result by simulating a nested table with div and span elements styled with display: table and display: table-cell respectively. (You could use an actual nested table, but that isn't semantically ideal for non-tabular data.)
HTML
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">ThisIsAReallyLongName</option>
<option value="mercedes">ThisNameIsMuchLongerThanTheOther</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
CSS
.input-combo {
display: table;
border-collapse: collapse;
width: 100%;
}
.input-combo .select,
.input-combo .input {
display: table-cell;
box-sizing: border-box;
}
.input-combo .select {
padding-right: 0.25em;
}
The desired layout behavior you are looking for is native to tables, which is to adjust the width of each cell so that the sum of cell-widths equals the width of the table itself. Browsers handle this logic automatically and rather intelligently.
You can then style each input element to simply have a width of 100%, filling up each cell, and allow the browser to determine the width of the cell based on the width of each cell's contents.
The below example compares two identical tables for which the only difference is the width of the content in the select box. The HTML and CSS is the same.
Example:
table {
width: 100%;
}
input, select {
width: 100%;
box-sizing: border-box;
padding: 1px 0; /* normalize */
}
.input-combo {
display: table;
border-collapse: collapse;
width: 100%;
}
.input-combo .select,
.input-combo .input {
display: table-cell;
box-sizing: border-box;
}
.input-combo .select {
padding-right: 0.25em;
}
<table>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
</td>
</tr>
</table>
<table>
<tr>
<td><input type="text" /></td>
</tr>
<tr>
<td>
<div class="input-combo">
<span class="select">
<select>
<option value="0"></option>
<option value="saab">ThisIsAReallyLongName</option>
<option value="mercedes">ThisNameIsMuchLongerThanTheOther</option>
</select>
</span>
<span class="input">
<input type="text" />
</span>
</div>
</td>
</tr>
</table>
try this. Works fine for me.
CSS:
table {
width: 98%;
}
input {
width: 100%;
}
HTML:
<table>
<tr>
<td colspan="2">
<input type=text id=topTextbox />
</td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
</td>
<td style="width: 100%;">
<input type=text id=bottomTextbox />
</td>
</tr>
</table>
Try this code once
<tr>
<td><input type=text id=topTextbox /></td>
</tr>
<tr>
<td>
<select>
<option value="0"></option>
<option value="saab">Saab</option>
<option value="mercedes">Mercedes</option>
</select>
<input type=text id=bottomTextbox />
</td>
</tr>
#topTextbox
{
width: 98%;
}
#bottomTextbox
{
width: 80%;
}
How can I make a span display inline with a bootstrap responsive table? Currently the span displays on a new line. I'd like the span to be to the right of the table, vertically centered with the table header.
<div class="panel panel-default">
<div class="panel-heading"><h3 class="panel-title">Sibling(s)</h3></div>
<div class="panel-body">
<div class="table-responsive">
<table class="table table-bordered">
<thead>
<tr>
<th>Gender</th>
<th>Name</th>
<th>Birthdate</th>
<th>School</th>
<th>Grade</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<select class="form-control" name="sibling-gender1" id="sibling-gender1">
<option></option>
<option>M</option>
<option>F</option>
</select>
</td>
<td>
<input class="form-control" name="sibiling-name1" id="sibiling-name1" style="width: 100%;"/>
</td>
<td>
<input class="form-control" name="sibling-birthdate1" id="sibling-birthdate1" placeholder="MM-DD-YYYY"
style="width: 100%;"/>
</td>
<td>
<input class="form-control" name="sibling-school1" id="sibling-school1" style="width: 100%;"/>
</td>
<td>
<select class="form-control" name="sibling-grade1" id="sibling-grade1">
<option></option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
<option>11</option>
<option>12</option>
</select>
</td>
</tr>
</tbody>
</table>
</div>
<span class="glyphicon glyphicon-plus"></span>
<!-- end .form-group -->
</div>
<!-- end .panel-body -->
</div>
<!-- end .panel -->
You could change the display property of the .table-responsive/span elements to table-cell. Just give .table-responsive a width of 100% in order to fill the remaining space. Additionally, you might also need to add padding to the span element.
EXAMPLE HERE
.table-responsive {
display:table-cell;
width:100%;
}
.table-responsive + .glyphicon.glyphicon-plus {
display:table-cell;
padding-left:10px;
}
If you want the span element to be aligned in the middle, all you would have to do is add vertical-align:middle to the element.
EXAMPLE HERE
.table-responsive + .glyphicon.glyphicon-plus {
display:table-cell;
padding-left:10px;
vertical-align:middle;
}
It's worth noting that this CSS assumes that the element are adjacent siblings. If they aren't, you would need to change the selectors.
A Bootstrap way could be to make the .panel-body a .row too and its children (.table-responsive, .glyphicon) become columns:
<div class="panel-body row">
<div class="col-xs-11 table-responsive "></div>
<span class="col-xs-1 glyphicon glyphicon-plus"></span>
</div>
The vertical center of the table header cannot be determined through CSS (as it is just one part of the left columns height), but you can adjust the top-paddings of the table header cells and the icon.
I want to display Hightlight on element that contains tabindex.
<FORM ACTION="../cgi-bin/mycgi.pl" METHOD=POST>
<TABLE BORDER CELLPADDING=3 CELLSPACING=5 BGCOLOR="#FFFFCC">
<TR>
<TD>name: <INPUT NAME="realname" TABINDEX=4 ACCESSKEY="g" VALUE="Go!"></TD>
<TD ROWSPAN=3>comments<BR>
<TEXTAREA COLS=25 ROWS=5 TABINDEX=3></TEXTAREA></TD></TR>
<TR> <TD>email: <INPUT NAME="email" TABINDEX=2></TD></TR>
<TR> <TD>department: <SELECT NAME="dep" TABINDEX=1>
<OPTION VALUE="">...
<OPTION VALUE="mkt">Marketing
<OPTION VALUE="fin">Finance
<OPTION VALUE="dev">Development
<OPTION VALUE="prd">Production</SELECT></TD></TR>
<tr>
<td><input type="button" tabindex="7" value="Tab7"></td>
<td><a href="http://www.google.com" tabindex=6>This is tab6</a></td>
</tr>
<tr>
<td><p tabindex=8>this is tab 8</p></td>
<td><span tabindex=9 onkeypress="return runScript(event)">this is tab 9</span></td>
</tr>
<tr>
<td><input tabindex=10 id="scriptBox" type="text" /></td>
</tr>
</TABLE>
</FORM>
When I press Tab key 4 times it goes to element that contains "tabindex=4" and display highlight on it.
I am happy to get idea from you.
Cheer,
Chanthou
You can select all elements with a tabindex attribute:
<style>
*[tabindex] {
border: solid red 1px;
}
</style>
<p><input type="text" tabindex="1" /></p>
<p tabindex="2">Hello</p>
The question is a little ambiguous - did you want to highlight an element when it has focus or highlight an element that can have focus?
If you know css, you can use the :focus pseudo-class to highlight an element when it has keyboard focus.
The following style will make all inputs' background color change to grey when they receive keyboard focus:
input:focus { background: #ccc; }