Solved

How can I get rid of this border on my input field?

Posted on 2015-01-12
8
110 Views
Last Modified: 2015-01-12
Attached is a screenshot of an input field and you can see the small, blue border on the right hand side. Here's the CSS for that field:

 input.search_box {
margin-top:3px;
margin-left:1px;
width:113px;
height:17px;
outline:none;
}
 input.search_box:focus {
margin-top:3px;
margin-left:1px;
width:113px;
height:17px;
outline:none;
}

border:#fffffff; doesn't work in that it adds some definition to the field, even with a white border that makes it stand out from the rest of the search div and I'm trying to get the input field and the search button etc to blend in together.

What can I do to get rid of the blue border?
0
Comment
Question by:brucegust
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40544352
there is no screenshot attached. However, screenshots are not very useful.

If you can't share the link, then provide a fiddle (or similar)
http://jsfiddle.net/
0
 

Author Comment

by:brucegust
ID: 40544415
Whoops! Here you go!

screenshot
0
 
LVL 38

Expert Comment

by:Tom Beck
ID: 40544420
You have outline:none but you don't have border:none.
0
What does it mean to be "Always On"?

Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.

 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40544421
you could try

border:0;

but without seeing the actual code I can't know if that's the right solution. I can't tell from a picture where in the code the border is coming from.

a link or a fiddle would be better.
0
 

Author Comment

by:brucegust
ID: 40544581
As far as a link, it's an intranet site and while I might be able to reproduce it on my server, let's start with the code and we'll go from there:

Here's the HTML:

		<!DOCTYPE html>
		<html lang="en">
		<html lang="en">
		<head>
		<title>CSV Upload Station</title>
		<link href="css/new_style.css" rel="stylesheet" type="text/css" />
		<map name="tabs">
		<area shape="rect" coords="19,27,140,43" href="http://www.google.com">
		<area shape="rect" coords="153,27,262,43" href="http://www.yahoo.com">
		<area shape="rect" coords="281,27,393,43" href="http://www.verizon.com">
		<area shape="rect" coords="405,27,523,43" href="http://www.nashville.gov">
		</map>
		<map name="login">
		<area shape="rect" coords="4,21,90,44" href="">
		<area shape="rect" coords="14,64,456,131" href="index.php">
		</map>
		<meta http-equiv="X-UA-Compatible" content="IE=9" />
	  <meta name="description" content="website description" />
	  <meta name="keywords" content="website keywords, website keywords" />
	  <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
		
		<script language="JavaScript"><!--
		function MM_jumpMenu(targ,selObj,restore){ //v3.0
		window.open(selObj.options[selObj.selectedIndex].value, "_self"); 
		if (restore) selObj.selectedIndex=0;
		}
		// -->
		</script>
		<SCRIPT LANGUAGE="JavaScript">
		<!--  Clock --
		var timerID = null
		var timerRunning = false

		function stopclock(){
			if(timerRunning)
				clearTimeout(timerID)
			timerRunning = false
		}

		function startclock(){
			stopclock()
			showtime()
		}

		function showtime(){
			var now = new Date()
			var hours = now.getHours()
			var minutes = now.getMinutes()
			var seconds = now.getSeconds()
			var timeValue = "" + ((hours > 12) ? hours - 12 : hours)
			timeValue  += ((minutes < 10) ? ":0" : ":") + minutes
			timeValue  += ((seconds < 10) ? ":0" : ":") + seconds
			timeValue  += (hours >= 12) ? " P.M." : " A.M."
			document.clock.face.value = timeValue 
			timerID = setTimeout("showtime()",1000)
			timerRunning = true
		}
		//-->
		</SCRIPT>
		
		</head>
		<body onLoad="startclock()">
		<div class="header">
			<div id="right_graphic">
				<div id="right_tabs"><img src="images/search_button.png" width="528" height="53" border="0" usemap="#tabs"></div>
				<div id="clockwork">Monday - January 12th, 2015<form name="clock" onSubmit="0" style="display:inline;"><INPUT TYPE="text" NAME="face" class="clock" VALUE ="....Initializing...."></form>
				</div>
				<div id="search_box"><input type="text" class="search_box" name="search"></div>
				<div id="search_button"><input type="image" src="images/search_button.png"></div>
			</div>
			<div id="left_graphic"><img src="images/left_header.png" usemap="#login" border="0"></div>

		</div>	
			<div class="site_content"><br><br><h3 align="left" style="float:left;">CSV Upload Station Page</h3><div style="float:right;">
			<a href="index.php">Home</a> | <a href="login.php">Login</a>		
			</div><br><br>
		<br><br><div style="float:right;"><select name="select62" size="1" onchange="MM_jumpMenu('new',this,1)">						
<option value="#" selected>Tools</option>
				<option value="csv_stage.php?id=4">twitter</option>
			
<option value="">_______________________________</option>
</select></div>Every time you upload a CSV file into a reporting tool, there's always a chance that some of your naming conventions don't match the field names of the database you're getting ready to interact with. To avoid that, this tool gives you the opportunity to "connect the dots" between your field names and the field names of the appropriate database. <br><br>At the end of the process, you'll have the opportunity to store your preferences so you won't have to do this every time you want to use a particular tool. Start by selecting the tool you want to use from the pulldown to the right.<br><br>To download a sample CSV file to see this app in action, click <A HREF="http://cascsapws1v.nss.vzwnet.com/sandbox/atlanta.csv" target="_blank">here</a>. Also, the list of tools that you see displayed in the pulldown menu to the right can be edited using the admin suite which can be accessed by clicking <a href="adm/admin.php" target="_blank">here</a>.<br><br>

			</div> <!-- close site_content -->
			 <div class="footer"><br>&copy; Verizon Wireless | South Area | All Rights Reserverd</div>
			
		</body>
		</html>

Open in new window


...and here's the CSS in full:

html { 
  height: 100%;
  margin:0px;
}

body { 
  font: normal .80em 'Droid Sans', arial, sans-serif;
  background: #FFF;
  color: #000;
  }
  
 .header {
 height:189px;
 min-width:1260px;
 margin:0px;
 background-image:url(../images/background.jpg);
 background-repeat: repeat-x;
 }
 
 #left_graphic {
 width:566px;
 height:189px;
 position:relative;
 z-index:2; 
 }
 
 #right_graphic {
 width:688px;
 height:189px;
 position:relative;
 float:right;
 z-index:2; 
 background-image:url(../images/right_header.png);
 }
 
 #right_tabs {
 width:528px;
 height:53px;
 position:relative;
 margin-left:160px;
 }
 
 #clockwork {
 position:relative;
 width:185px;
 height:35px;
 margin-left:491px;
 margin-top:17px;
 z-index:4;
 font-family:arial;
 size:10pt;
 color:#ffffff;
 text-align:right;
 }
 
 #search_box {
width:154px;
height:27px;
margin-top:-2px;
margin-left:265px; 
border:0px solid #ffffff;
 }
 
 #search_button {
 position:relative;
 height:27px;
 width:26px;
 margin-top:-27px;
margin-left:650px; 
 }
 
 input.search_box {
margin-top:3px;
margin-left:1px;
width:113px;
height:17px;
outline:none;
border:none;
}
 input.search_box:focus {
margin-top:3px;
margin-left:1px;
width:113px;
height:17px;
outline:none;
border:none;
}


input.clock {
width:100px;
height:18px;
border:none; 
text-align:right;
background:transparent;
color:#ffffff;
}

.site_content {
width:1000px;
margin-bottom:-30px;
overflow:auto;
margin:auto;
}

.footer {
position:fixed;
bottom:0;
height:30px;
width:100%;
background-image:url(../images/footer.jpg);
background-repeat:repeat-x;
font-size:9pt;
color:#ffffff;
text-align:center;
}

.sub_menu {
position:relative;
float:right;
width:600px;
text-align:right;
margin-top:15px;
}

table.csv_sample {
 box-shadow: 7px 7px 15px #e9e9e9;
 border-collapse:separate;
border-radius:6px;
-moz-border-radius:6px;
 margin:auto;
 width:auto;
border: 1px solid #d7d4d4;
 }
 
 td.csv_sample {
padding:5px;
border: 1px solid grey;
 text-align:center;
 background-color:#cccccc;
 }
 
 td.csv_sample_cell {
padding:5px;
border-collapse: collapse;
border: 1px solid grey;
 }
 
 td.title {
 text-align:right;
 }
 
 .conclusion {
width:750px;
margin:auto;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

 .callout {
width:250px;
margin-right:10px;
position:relative;
float:left;
padding:10px;
border: solid #000000 1px;
color:#000000;
box-shadow: 5px 5px 10px #cccccc;
}

#code_container {
border:1px solid #000000; 
width:807px; 
height:250px; 
overflow:auto; 
background-color: #013c76;
font-family:Arial; 
color:#ffffff; 
font-size:10pt; 
margin:auto;
}

ol {
background-color:#ffc; 
color:#ffffff; 
padding-left:8px;
padding-right:10px;
margin-top:0px; 
margin-bottom:-12px;
}

ol li {
line-height:8px;
padding-top:3px; 
padding-bottom:3px; 
padding-left:3px;
}

ol li span {
color:#000000;
}

Open in new window


What do you think?
0
 
LVL 25

Accepted Solution

by:
Kyle Hamilton earned 500 total points
ID: 40544606
did you try border:0;

input.search_box {
margin-top:3px;
margin-left:1px;
width:113px;
height:17px;
outline:none;
border:0;
}

Open in new window


I took your code and pasted it into fiddle. Here is the result. Please make the necessary adjustments and press 'save' to generate an updated link:

http://jsfiddle.net/85wx9wtu/
0
 

Author Comment

by:brucegust
ID: 40544615
That did it! Thank you, Kyle!
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 40544632
you're welcome.

in the future, jsfiddle is your friend to help people help you :)
0

Featured Post

On Demand Webinar: Networking for the Cloud Era

Ready to improve network connectivity? Watch this webinar to learn how SD-WANs and a one-click instant connect tool can boost provisions, deployment, and management of your cloud connection.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Unordered lists (HTML ul tags) are very handy to create menus of all types, shapes and sizes.  All it takes is a little knowledge of CSS and the possibilities are endless. First off, you should know the general format for menus created using the …
CSS3 Custom checkboxes This article shows how to style the checkbox form element using only CSS. Works in: Chrome, FF, Safari, Opera, IE9+ Uses modernizr.js to check for :checked pseudo class, falling back to plain old checkboxes (IE8 and bel…
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
Suggested Courses

630 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question