I'm a fairly new coder, so I hope this question makes sense.
I am building a website and currently working on the Navigation bar.
As I am building the search bar, using a sprite image I have come across a problem when viewing the site live in different browsers.
the search button image renders differently on safari compared to firefox, chrome, IE and Opera.
<hgroup>
<form id=header-search>
<input class=searchbox placeholder="Search Spout TV"><input type=submit class=button value=""/>
</form>
<p class=login>LogIn<p class=arrow-down></p></p>
<p class=line>|</p>
<p class=signup>Sign Up</p>
</hgroup>
this is the CSS3 code for it:
#header-search {
overflow: visible;
}
input.searchbox {
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
background-color: #af5354;
border: 1px solid #af5354;
border-radius: 5px;
color: #fff;
float: left;
height: 19px;
margin-left: 0.5em;
margin-top: 0.2em;
outline: 0 none;
padding-left: 0.5em;
padding-top: 0.3em;
text-align: left;
width: 220px;
}
input.searchbox {
margin-top: 00.3em;
}
input.searchbox:focus {
background: #e87476;
background: -moz-linear-gradient(top, #e87476 0%, #e87476 20%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #e87476), color-stop(20%, #e87476));
outline: 0;
color: #FFF;
}
*::-webkit-input-placeholder {
color: #FFF;
}
*:-moz-placeholder {
color: #FFF;
}
*::-moz-placeholder {
color: #FFF;
}
*:-ms-input-placeholder {
color: #FFF;
}
#header-search input.button {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
float: left;
border: none;
background: url("../../assets/images/sprite.png") -142px -7px;
overflow: hidden;
}
#header-search input.button:hover {
border: 0;
padding: 0;
margin: 2px 0 0 -36px;
width: 38px;
height: 30px;
background: url("../../assets/images/sprite.png") -142px -47px;
float: left;
border: none;
}
Any help would be appreciated.
thank you.
The view of html elements is different in each web browser and it's all because each web browser may have different engine. If you would like to have similar display on each web browser maybe you should try use boostrap?
1.You can download it from: http://getbootstrap.com/
2.Next you have to put the file bootstrap.min.css in the location where is your index.html
3.Next include the command
<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
between
<head></head>
markers.
The second case- If You use html5 and css3 You don't need to use
-webkit-border-radius:
Just use:
border-radius:
For all(actual versions) web browsers it should be ok.
Or maybe I don’t understand your question.. hmm?
Related
I am trying to code a search bar with a magnifying glass icon inside the bar and no search button. I have found an example resource that I am basing my code after: Search Icon Inside Input.
I am having difficulty getting the magnifying glass icon to even appear. Also, there is the issue of the search bar itself not being vertically aligned within my primary-nav container.
I am using the URL encoder for SVG tool at URL Encoder for SVG Tool and the font awesome icon with the background tag:
<i class="fa-solid fa-magnifying-glass"></i>
Here is a snippet of my style.css:
/* || PRIMARY MENU || */
.primary-nav {
align-items: center;
height: 50px;
left: 0px;
padding: 15px;
width: 100%;
margin: 0px;
background-color: darkgray;
display: inline;
position: fixed;
top: 70px;
z-index: 3;
font-weight: bold;
}
.search-container {
align-items: center;
display: flex;
justify-content: right;
}
form .no-submit {
width: 180px;
align-items: center;
color: white;
right: 0;
display: flex;
padding: 2px;
border: 1px solid currentColor;
border-radius: 5px;
margin: 0 0;
}
input .nosubmit {
border: 1px solid white;
width: 100%;
padding: 9px 4px 9px 4px;
background-image: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") no-repeat 13px center;
background-position: 10px center;
}
input[type="search"] {
border: none;
background: transparent;
margin: 0;
padding: 7px 8px;
font-size: 16px;
color: inherit;
border: 1px solid transparent;
border-radius: inherit;
}
input[type="search"]::placeholder {
color: white;
}
input[type="search"]:focus {
box-shadow: 0 0 3px 0 #3f69a8;
border-color: #3f69a8;
outline: none;
}
As well as my navigation.php view:
<div class="search-container">
<form class="no-submit">
<input class="no-submit" type="search" placeholder="Search..." method="GET">
</form>
</div>
There are a lot of issues in your code so let's go through them one by one.
1. Wrong selector
input .nosubmit isn't pointing at anything. Your class is named .no-submit and if you want to select input with the specific class you have to write it like this input.no-sumbit. Your selector is looking for .no-submit in input element.
2. Wrong usage of background
Here is a great example of how to use background in CSS. I haven't found usage of background where you write all parameters in a single property, as you did (I am not saying it doesn't work) so I decapsulated it into more properties. And when you want to add an image in url() better way is to insert the path to the image and not inside of the SVG file. For example, I choose a random magnifying glass icon and imported it like so:
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg") ;
You can also import your local file it doesn't have to be online. Just change the URL for relative or absolute path to the SVG.
3. Using background when you need only background-color
It may not matter most of the time but in your code having background: transparent removes your background images so you need to use background-color: transparent.
I believe there are more mistakes in your code but these are the worst one and your code will not work with them.
Here is working code snippet:
/* || PRIMARY MENU || */
.primary-nav {
align-items: center;
height: 50px;
left: 0px;
padding: 15px;
width: 100%;
margin: 0px;
background-color: darkgray;
display: inline;
position: fixed;
top: 70px;
z-index: 3;
font-weight: bold;
}
.search-container {
align-items: center;
display: flex;
justify-content: left;
}
form .no-submit {
width: 180px;
align-items: center;
color: white;
right: 0;
display: flex;
padding: 2px;
border: 1px solid currentColor;
border-radius: 5px;
margin: 0 0;
}
input.no-submit {
border: 1px solid white;
width: 100%;
padding: 9px 4px 9px 4px;
/* You can use your image but having cleaner code is better, so I suggest saving the file and just linking it*/
/*background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3C!--! Font Awesome Pro 6.0.0 by #fontawesome - https://fontawesome.com License - https://fontawesome.com/license (Commercial License) Copyright 2022 Fonticons, Inc. --%3E%3Cpath d='M500.3 443.7l-119.7-119.7c27.22-40.41 40.65-90.9 33.46-144.7C401.8 87.79 326.8 13.32 235.2 1.723C99.01-15.51-15.51 99.01 1.724 235.2c11.6 91.64 86.08 166.7 177.6 178.9c53.8 7.189 104.3-6.236 144.7-33.46l119.7 119.7c15.62 15.62 40.95 15.62 56.57 0C515.9 484.7 515.9 459.3 500.3 443.7zM79.1 208c0-70.58 57.42-128 128-128s128 57.42 128 128c0 70.58-57.42 128-128 128S79.1 278.6 79.1 208z'/%3E%3C/svg%3E") ;*/
background-image: url("https://upload.wikimedia.org/wikipedia/commons/5/55/Magnifying_glass_icon.svg");
background-size: 13px;
background-repeat: no-repeat;
background-position: 10px center;
}
input[type="search"] {
border: none;
background-color: transparent;
margin: 0;
padding: 7px 8px 7px 30px;
font-size: 16px;
color: inherit;
border: 1px solid black;
border-radius: inherit;
}
input[type="search"]::placeholder {
color: white;
}
input[type="search"]:focus {
box-shadow: 0 0 3px 0 #3f69a8;
border-color: #3f69a8;
outline: none;
}
<div class="search-container">
<form class="no-submit">
<input class="no-submit" type="search" placeholder="Search..." method="GET">
</form>
</div>
Also, I have added padding so the text isn't over your magnifying glass.
Magnifier icon is present in google icons. Try this code:
<head>
<style>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<style>
</head>
<body>
<i class="material-icons">search</i>
</body>
For putting the magnifying glass icon in the input, we use a Unicode character in the placeholder.
<input type="search" name="s" value="" style="width: 100%; margin: 0;" placeholder="🔎">
I'm applying a box shadow to a form and thus all of it's inputs. For the submit button I have it as a specific class to which I'm trying too apply box-shadow: none, but it doesn't seem to be taking. Any idea why?
css:
body {
background: #b3b3b3;
font: 16px helvetica, arial, sans-serif;
}
.clear_both {
clear: both;
}
/* Heading */
#HeaderContainer {
background: #272727;
height: 120px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#NavigationContainer {
position: relative;
float: right;
top: 90px;
margin: -5px 30px 0px 0px;
}
#NavigationContainer .current_page a {
color: #2e7de8;
text-shadow: 0px 0px 10px #2e7de8;
}
#NavigationContainer a:hover {
text-shadow: 0px 0px 15px #2e7de8;
}
#NavigationContainer li {
display: inline;
margin-left: 40px;
padding: 5px;
}
#NavigationContainer a {
text-decoration: none;
color: #FFF;
font: bold 20px helvetica, arial, sans-serif;
}
/* Content */
#MainContent {
width: 960px;
margin: 20px auto 40px auto;
}
#ContentRightColumn {
float: right;
width: 240px;
background: #272727;
padding: 20px 20px 40px 20px;
margin-top: 20px;
color: #fff;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
}
#ContentRightColumn h1 {
font-size: 24px;
font-weight: bold;
}
#ContentRightColumn h3 {
font-size: 14px;
font-weight: bold;
}
#ContentRightColumn p {
font-size: 16px;
}
.news_item {
margin-top: 15px;
}
#ContentLeftColumn {
width: 640px;
padding: 20px;
}
#ContentLeftColumn h1 {
background: #272727;
color: #FFF;
max-width: 500px;
font-size: 24px;
font-weight: bold;
padding: 5px 10px;
border-radius: 15px;
box-shadow: 5px 5px 5px #7f7f7f;
position: relative;
right: 40px;
}
#ContentLeftColumn p {
text-indent: 1em;
}
.content_item {
margin-top: 20px;
}
.content_item p {
margin-top: 20px;
}
.content_item h2 {
font-weight: bold;
font-size: 24px;
color: #004dd4;
text-shadow: 3px 3px 4px #7f7f7f;
right: 20px;
}
/* Footer */
#FooterContainer {
background: #272727;
color: #fff;
}
#FooterContainer li {
display: inline;
}
#FooterContainer input, #FooterContainer textarea {
display: block;
width: 100%;
}
#ContactNavigationContainer {
float: right;
}
#FooterRightColumn {
width: 40%;
float: right;
margin: 20px 150px 20px 50px;
}
#FooterRightColumn form {
margin-top: 20px;
padding: 15px 20px;
}
#FooterRightColumn input, #FooterRightColumn textarea {
margin: 5px;
box-shadow: inset 5px 5px 8px black;
border: none;
font-size: 16px;
background: #b3b3b3;
padding: 5px 10px;
}
#FooterRightColumn textarea {
height: 160px;
}
#FooterRightColumn .current_contact_option {
margin-right: 20px;
padding-right: 20px;
border-right: 1px solid #FFF;
color: #2e7de8;
font-weight: bold;
text-shadow: 0px 0px 5px #2e7de8;
}
#FooterLeftColumn {
width: 40%;
padding: 40px 50px;
margin-left: 100px;
margin-top: 20px;
}
#FooterLeftColumn h1 {
font-weight: bold;
font-size: 24px;
position: relative;
right: 20px;
}
#FooterLeftColumn p {
padding: 20px 0px;
text-indent: 1em;
}
.submit_button {
position: relative;
width: 80px;
float: right;
}
html:
<html>
<head>
<title>B.workshop Home</title>
<link rel="stylesheet" type="text/css" href="../css/reset.css" />
<link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>
<body>
<div id="HeaderContainer">
<img src="../images/logo.png"></img>
<div id="NavigationContainer">
<ul id="NavigationMenu">
<li class="current_page">Home</li>
<li>Technologies</li>
<li>Projects</li>
</ul>
</div> <!-- Close NavigationContainer -->
</div> <!-- Close HeaderContainer -->
<div id="MainContent">
<div id="ContentRightColumn">
<h1>News</h1>
<div class="news_item">
<h3>Mon. October 28th</h3>
<p>I need to build a portfolio, you need a website or application. Until I I get a few jobs under the belt I'm offering to work at the equivalent of a paid interns wage. Take advantage of this while you can!</p>
</div>
<div class="news_item">
<h3>Mon. October 26th</h3>
<p>The website is now live!</p>
</div>
</div> <!-- Close RightColumn -->
<div id="ContentLeftColumn">
<h1>Welcome to Brett's Workshop...</h1>
<div class="content_item">
<h2>So who are you?</h1>
<p>Hi, my name is Brett Sprouse and you've found my homepage! I'm a freelance web developer and programmer. Take a look around and if you think you may have a project I can help you with then head over to the contact page and share it with me.</p>
</div>
<div class="content_item">
<h2>Ok, and what can you do for me?</h2>
<p>Well, I can make you a webpage of course. Not just that, but setup hosting, provide server maintenance, website support, both per job or on a contractual basis. I can likely also take over support for existing websites in addition to the one I may make from scratch.</p>
<p>Everything is coded to the current html specifications including html5 and css3 (when applicable, many browsers still do not support the current html5/css3 specifications). I said I'm a programmer as well so this means I can work my way around javascript for front end/client side interactivity as well as server side scripting preferentially with python though I can also use php if it's for some reason forced upon me.</p>
</div>
<div class="content_item">
<h2>Is that it?</h2>
<p>What do you mean is that it!? Ok, ok, I can also develop desktop applications, tools and utilities, or scripts to help automate otherwise monotonous tasks; pretty much anything within a programmers domain. I know quite a few languages, libraries, frameworks, and can learn new ones rather quickly. Both windows and linux so if there's a task you believe can be solved with programming I can likely make that happen for you. Do keep in mind however that I am only one guy so there is a limit to the size of projects in which I can handle, but if you're not sure it doesn't hurt to ask. </p>
</div>
</div> <!-- Close LeftColumn -->
</div> <!-- Close MainConent -->
<div id="FooterContainer">
<div id="FooterRightColumn">
<div id="ContactNavigationContainer">
<ul id="ContactNavigation">
<li class="current_contact_option">Message Form</li>
<li>Live Chat</li>
</ul>
</div> <!-- Close ContactNavigationContainer -->
<form>
<input type="text" value="Name" name="name"></input>
<input type="text" value="Email" name="email"></input>
<textarea type="text" value= "Message" name="message"></textarea>
<div class="submit_button"><input type="submit" value="submit"></input></div>
</form>
</div> <!-- Close FooterRightColumn -->
<div id="FooterLeftColumn">
<h1>Contact</h1>
<p>So you've looked me over and decided to give me a shot. Well you won't be let down. Just use the form on your right to send me a shot description and anything else you feel is necessary and I'll get back to you shortly with a proposal. If you've happened to catch me when I'm on the computer and would like to talk directly feel free to use the new live chat system!</p>
</div> <!-- Close FooterLeftColumn -->
<div class="clear_both"></div>
</div> <!-- Close FooterContainer -->
</body>
</html>
This is just an issue regarding specificity - you just need to be more specific than the initial declaration.
No need for !important, just use the following:
#FooterRightColumn .submit_button input {
box-shadow: none;
}
jsFiddle example - it works.
Initially, you were added the shadow via #FooterRightColumn input. Simply be more specific by targeting #FooterRightColumn .submit_button input instead.
Here is the fiddle. I am trying to style the <select> and <input id='checkbox'> using CSS. I am currently using select {background: #4a4a4a} and it works, but I cannot get any other styles to work. The checkbox style doesn't work at all when using input[type='checkbox'] {background: #4a4a4a}
HTML:
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<input type='checkbox'>
CSS:
body {
background: #252525;
}
select {
background: #4a4a4a;
border-radius: 0px;
}
input[type='checkbox'] {
background: #4a4a4a;
border-radius: 0px;
}
JS:
none
Edit
I have started a project where I am making my own not styleable form elements. For more info see this question.
Styling checkboxes
Styling checkboxes is tricky and inconsistent across browsers. Here is pure CSS approach. It takes advantage of that when label and input are connected with an id= , clicking on the label activates the input box itself. No JavaScript needed there.
HTML
<input type="checkbox" id="my-checkbox">
<label for="my-checkbox">Checkbox label text
<span class="checkbox"></span>
</label>
CSS
Hide checkbox, style the <span> as you like. I've used a CSS sprite here.
input[type="checkbox"] {
display: none;
}
input[type="checkbox"] + label .checkbox {
display: inline-block;
width: 22px;
height: 19px;
vertical-align: middle;
background: url('ui-sprite.png') left -90px no-repeat;
cursor: pointer;
}
input[type="checkbox"]:checked + label .checkbox {
background: url('ui-sprite.png') -30px -90px no-repeat;
}
Styling select inputs
I haven't found a simple working solution for this yet.
Here is an article about a hack that seems to be on a good way.
Given how every browser has its own rules and exceptions when it comes to input element styling, I tend to use things like http://uniformjs.com/ for consistent input styling. Slows things down on pages with thousands of input elements, but otherwise quite excellent.
You cannot style all form elements. Browsers tend to not allow you to style check-boxes and select boxes (As well as drop downs, radios, file uploads etc...). The general concept I have used before is to hide the actual element and use a replacement element such as a div to display to the user. That div can be styled to look and work the way you want. The tricky part and part most often missed is you have to actually change the state of the hidden form element when the user interacts with the mock element.
This is a JQuery Plugin that will provide the above functionality. This plugin was written with the intent that the user would style the elements according to what they need. Here is an example JsFiddle that demonstrates the plugin and exposes the CSS selectors with some basic styling. Basic code below...
HTML
<form>
<select>
<option>Hello</option>
<option>Hola</option>
<option>Bonjour</option>
</select>
<br/>
<input type='checkbox'>
</form>
JQuery
$(document).ready(function () {
$('body').styleMyForms();
});
CSS
body {
background: #252525;
}
.sf {
position: relative;
display: block;
float: left;
}
.sf-checkbox {
top: 6px;
margin-right: 5px;
height: 15px;
width: 15px;
background: #fff;
border: 1px solid #444;
cursor: pointer;
background: #4a4a4a;
border-radius: 0px;
}
.sf-select {
display: block;
width: 220px;
border: 1px solid #222;
background: #4a4a4a;
border-radius: 0px;
padding: 0px 10px;
text-decoration: none;
color: #333;
margin-bottom: 10px;
}
.sf-select-wrap {
position: relative;
clear: both;
}
.sf-select-ul {
background: #fff;
display: none;
list-style: none;
padding: 0;
margin: 0;
position: absolute;
border: 1px solid #888;
width: 240px;
padding: 0px;
top: 33px;
}
.sf-select-ul li {
position: relative;
cursor: pointer;
padding: 0px 10px;
color: #333;
}
.sf-select-ul li:hover {
background: #efefef;
}
.sf-select-ul li.selected {
background: #508196;
color: #fff;
}
.sf-select:focus, .sf-radio:focus, .sf-checkbox:focus, input[type="text"]:focus {
border-color: #222;
}
.sf-select:hover {
}
.sf-radio:hover, .sf-checkbox:hover, input[type="text"]:hover, input[type="text"]:focus, .sf-select:focus {
background: #efefef;
}
.sf-radio.selected, .sf-radio.selected:focus, .sf-radio.selected:hover, .sf-checkbox.selected, .sf-checkbox.selected:focus .sf-checkbox.selected:hover {
background: #9cb7c3;
}
.clear {
clear: both;
}
.buttonish {
display: block;
font-family:'Francois One', sans-serif;
font-weight: normal;
font-size: 2.8em;
color: #fff;
background: #9cb7c3;
padding: 10px 20px;
border-radius: 3px;
text-decoration: none;
width: 480px;
text-align: center;
margin-top: 50px;
text-shadow: 2px 2px 4px #508196;
box-shadow: 2px 2px 4px #222;
}
Think in boxes, how many boxes does a populated select seem to have when you look at it in a browser...
a lot, and they have lots of associated styles/scripts (background/colors,paddings, the functionality open/close etc.)
And actually you don't see anything of that in your code
So the code can only come from the browser
and browsers are different, all answers are correct, don't try to style it, let a JavaScript replace the elements and functionality.
Hi i want to style an input submit button which has a background as given in the attached image.The back ground image was provided, but im not sure how to implement it in the submit button so instead of using that image i tried using the css 3 color gradient properties to style the button,however, i cant get the desired color output.Any help is welcome.
CSS code so far.
.button {
-moz-border-radius: 18px;
-moz-box-shadow: #fffff 0px 0px 11px;
-webkit-border-radius: 18px;
-webkit-box-shadow: #6E7849 0 0 10px;
background-color: #fefefefe;
background-image: -moz-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -ms-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -o-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: -webkit-linear-gradient(24deg, #d8d8d8, #fefefefe);
background-image: linear-gradient(24deg, #d8d8d8, #fefefefe);
border-radius: 18px;
border: 1px solid #888888;
box-shadow: #fffff 0px 0px 11px;
color: #000000;
display: inline-block;
font-size: 3em;
margin: auto;
padding: 4px;
text-decoration: none;
}
Use the image. Matching the gradient fully to the image is an unnecessary pain:
.button {
display:block;
width:50px; //use actual image width
height:50px; // use actual image height
background:url(../img/button.png); //image file path
}
.button:hover {
background:url(../img/button_hover.png);
}
To use an image as the input is very simple:
<input type="image"src="/images/submit.gif" />
Finally i found the way to make this button using sliding door technique.However still in jeopardy to style it in disabled state.
This link helped me alot http://www.springload.co.nz/love-the-web/dynamic-submit-buttons
css
div.submit_button {
background: transparent url('common/images/bg-submit2.png') no-repeat 0 0;
display: block;
float: left;
height: 27px; /* total height of the button */
padding-left: 15px; /* end width */
}
span.submit_button_end {
background: #fff url('common/images/bg-submit2.png') no-repeat 100% 0; /* used a sprite image */
display: block;
float: left;
font-weight: normal;
height: 27px; /* total height of the button */
}
input.submit_input {
font-size: 13px;
font-weight:bold;
background: none;
border: none;
padding: 0 0 2px 15px; /* end width */
color: #1b1d60;
cursor: pointer;
position: relative;
height: 25px;
line-height: 25px;
left: -15px;
margin-right: -15px;
padding-right: 15px;
}
input.submit_input:hover {color: #fff;}
div.submit_button:hover {background-position: 0 100%;}
div.submit_button:hover span.submit_button_end {background-position: 100% 100%;}
HTML
<div class='submit_button'>
<span class='submit_button_end'>
<input class='submit_input' type='submit' value='Submit button' tabindex='#' />
</span>
</div>
Hey guys I'm making a new layout for my community and now I'm slicing him into pieces. Their is only 1 problem I designed a textfield where the user can search but there are 2 links right after the textfield. I don't know how to let them stick together. I've tried something and it actually works in google chrome, but in it doesn't.
.searchbox {
background: url('../images/searchbox.gif') no-repeat;
border: 0px;
height: 24px;
width: 308px;
font-size: 11px;
padding: 1px -15px 0px 10px;
}
.options {
background: url('../images/options_active.gif') repeat-x;
background: url('../images/options.gif') repeat-x;
font-size: 10px;
padding: 6px;
margin: 0 0 0 -10px;
color: #6b6b6b;
}
.options:active {
background: url('../images/options_active.gif') repeat-x;
color: #000;
}
.button {
background: url('../images/button_bg_active.gif') repeat-x;
background: url('../images/button_bg.gif') repeat-x;
color: #fff;
font-weight: bold;
font-size: 11px;
padding: 5px;
-moz-border-radius-topright: 5px;
-moz-border-radius-bottomright: 5px;
}
.button:active {
background: url('../images/button_bg_active.gif') repeat-x;
}
this is what I've got in my css file
this is my html file:
<div id="topbar">
<form method="post" action="">
<input type="text" class="searchbox" name="searchbox" value="Zoek events, nieuws, dj's, foto's en veel meer..." />
Advanced options
Zoeken!
</form>
</div>
Here is what it looks in firefox:
alt text http://img411.imageshack.us/img411/8282/searchj.png
and this is what it looks in chrome:
alt text http://img22.imageshack.us/img22/2655/searchchrome.png
To start with you might also want to use -webkit-border-top-left-radius: 5px and -webkit-border-bottom-left-radius: 5px to get that same effect with Chrome and Safari.
I would do something like the following:
.form {
position: relative; /* Alows you to absolutely position child elements */
}
.searchbox {
float: left;
position: absolute;
}
.options, .button {
float: right;
position: absolute;
}
.options {
right: -30px; /* Width of the button to its right */
}