Before deciding whether to use the <base>
tag or not, you need to understand how it works, what it can be used for and what the implications are and finally outweigh the advantages/disadvantages.
The <base>
tag mainly eases creating relative links in templating languages as you don't need to worry about the current context in every link.
You can do for example
<base href="${host}/${context}/${language}/">
...
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
...
<a href="home">home</a>
<a href="faq">faq</a>
<a href="contact">contact</a>
...
<img src="img/logo.png" />
instead of
<link rel="stylesheet" href="/${context}/${language}/css/style.css" />
<script src="/${context}/${language}/js/script.js"></script>
...
<a href="/${context}/${language}/home">home</a>
<a href="/${context}/${language}/faq">faq</a>
<a href="/${context}/${language}/contact">contact</a>
...
<img src="/${context}/${language}/img/logo.png" />
Please note that the <base href>
value ends with a slash, otherwise it will be interpreted relative to the last path.
As to browser compatibility, this causes only problems in IE. The <base>
tag is in HTML specified as not having an end tag </base>
, so it's legit to just use <base>
without an end tag. However IE6 thinks otherwise and the entire content after the <base>
tag is in such case placed as child of the <base>
element in the HTML DOM tree. This can cause at first sight unexplainable problems in Javascript/jQuery/CSS, i.e. the elements being completely unreachable in specific selectors like html>body
, until you discover in the HTML DOM inspector that there should be a base
(and head
) in between.
A common IE6 fix is using an IE conditional comment to include the end tag:
<base href="http://example.com/en/"><!--[if lte IE 6]></base><![endif]-->
If you don't care about the W3 Validator, or when you're on HTML5 already, then you can just self-close it, every webbrowser supports it anyway:
<base href="http://example.com/en/" />
Closing the <base>
tag also instantly fixes the insanity of IE6 on WinXP SP3 to request <script>
resources with an relative URI in src
in an infinite loop.
Another potential IE problem will manifest when you use a relative URI in the <base>
tag, such as <base href="//example.com/somefolder/">
or <base href="/somefolder/">
. This will fail in IE6/7/8. This is however not exactly browser's fault; using relative URIs in the <base>
tag is namely at its own wrong. The HTML4 specification stated that it should be an absolute URI, thus starting with the http://
or https://
scheme. This has been dropped in HTML5 specification. So if you use HTML5 and target HTML5 compatible browsers only, then you should be all fine by using a relative URI in the <base>
tag.
As to using named/hash fragment anchors like <a href="#anchor">
, query string anchors like <a href="?foo=bar">
and path fragment anchors like <a href=";foo=bar">
, with the <base>
tag you're basically declaring all relative links relative to it, including those kind of anchors. None of the relative links are relative to the current request URI anymore (as would happen without the <base>
tag). This may in first place be confusing for starters. To construct those anchors the right way, you basically need to include the URI,
<a href="${uri}#anchor">hash fragment</a>
<a href="${uri}?foo=bar">query string</a>
<a href="${uri};foo=bar">path fragment</a>
where ${uri}
basically translates to $_SERVER['REQUEST_URI']
in PHP, ${pageContext.request.requestURI}
in JSP, and #{request.requestURI}
in JSF. Noted should be that MVC frameworks like JSF have tags reducing all this boilerplate and removing the need for <base>
. See also a.o. What URL to use to link / navigate to other JSF pages.
Here are three solutions:
Solution #1 - appearance: none - with Internet Explorer 10 - 11 workaround (Demo)
--
To hide the default arrow set appearance: none
on the select element, then add your own custom arrow with background-image
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none; /* Remove default arrow */
background-image: url(...); /* Add custom arrow */
}
Browser Support:
appearance: none
has very good browser support (caniuse) - except for Internet Explorer.
We can improve this technique and add support for Internet Explorer 10 and Internet Explorer 11 by adding
select::-ms-expand {
display: none; /* Hide the default arrow in Internet Explorer 10 and Internet Explorer 11 */
}
If Internet Explorer 9 is a concern, we have no way of removing the default arrow (which would mean that we would now have two arrows), but, we could use a funky Internet Explorer 9 selector.
To at least undo our custom arrow - leaving the default select arrow intact.
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background-image:none\9;
padding: 5px\9;
}
}
All together:
select {
margin: 50px;
width: 150px;
padding: 5px 35px 5px 5px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background: url(https://stackoverflow.com/favicon.ico) 96% / 15% no-repeat #EEE;
}
/* CAUTION: Internet Explorer hackery ahead */
select::-ms-expand {
display: none; /* Remove default arrow in Internet Explorer 10 and 11 */
}
/* Target Internet Explorer 9 to undo the custom arrow */
@media screen and (min-width:0\0) {
select {
background: none\9;
padding: 5px\9;
}
}
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
This solution is easy and has good browser support - it should generally suffice.
If browser support for Internet Explorer is needed, read ahead.
Solution #2 Truncate the select element to hide the default arrow (demo)
--
(Read more here)
Wrap the select
element in a div with a fixed width and overflow:hidden
.
Then give the select
element a width of about 20 pixels greater than the div.
The result is that the default drop-down arrow of the select
element will be hidden (due to the overflow:hidden
on the container), and you can place any background image you want on the right-hand-side of the div.
The advantage of this approach is that it is cross-browser (Internet Explorer 8 and later, WebKit, and Gecko). However, the disadvantage of this approach is that the options drop-down juts out on the right-hand-side (by the 20 pixels which we hid... because the option elements take the width of the select element).
[It should be noted, however, that if the custom select element is necessary only for mobile devices - then the above problem doesn't apply - because of the way each phone natively opens the select element. So for mobile, this may be the best solution.]
.styled select {
background: transparent;
width: 150px;
font-size: 16px;
border: 1px solid #CCC;
height: 34px;
}
.styled {
margin: 50px;
width: 120px;
height: 34px;
border: 1px solid #111;
border-radius: 3px;
overflow: hidden;
background: url(https://stackoverflow.com/favicon.ico) 96% / 20% no-repeat #EEE;
}
<div class="styled">
<select>
<option>Pineapples</option>
<option selected>Apples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
</div>
If the custom arrow is necessary on Firefox - prior to Version 35 - but you don't need to support old versions of Internet Explorer - then keep reading...
Solution #3 - Use the pointer-events
property (demo)
--
(Read more here)
The idea here is to overlay an element over the native drop down arrow (to create our custom one) and then disallow pointer events on it.
Advantage: It works well in WebKit and Gecko. It looks good too (no jutting out option
elements).
Disadvantage: Internet Explorer (Internet Explorer 10 and down) doesn't support pointer-events
, which means you can't click the custom arrow. Also, another (obvious) disadvantage with this method is that you can't target your new arrow image with a hover effect or hand cursor, because we have just disabled pointer events on them!
However, with this method you can use Modernizer or conditional comments to make Internet Explorer revert to the standard built in arrow.
NB: Being that Internet Explorer 10 doesn't support conditional comments
anymore: If you want to use this approach, you should probably use Modernizr. However, it is still possible to exclude the pointer-events CSS from Internet Explorer 10 with a CSS hack described here.
.notIE {
position: relative;
display: inline-block;
}
select {
display: inline-block;
height: 30px;
width: 150px;
outline: none;
color: #74646E;
border: 1px solid #C8BFC4;
border-radius: 4px;
box-shadow: inset 1px 1px 2px #DDD8DC;
background: #FFF;
}
/* Select arrow styling */
.notIE .fancyArrow {
width: 23px;
height: 28px;
position: absolute;
display: inline-block;
top: 1px;
right: 3px;
background: url(https://stackoverflow.com/favicon.ico) right / 90% no-repeat #FFF;
pointer-events: none;
}
/*target Internet Explorer 9 and Internet Explorer 10:*/
@media screen and (min-width: 0\0) {
.notIE .fancyArrow {
display: none;
}
}
<!--[if !IE]> -->
<div class="notIE">
<!-- <![endif]-->
<span class="fancyArrow"></span>
<select>
<option>Apples</option>
<option selected>Pineapples</option>
<option>Chocklate</option>
<option>Pancakes</option>
</select>
<!--[if !IE]> -->
</div>
<!-- <![endif]-->
Best Answer
Maybe this will be helpful
-- select an option --
Will be displayed by default. But if you choose an option, you will not be able to select it back.You can also hide it using by adding an empty
option
<option style="display:none">
so it won't show up in the list anymore.
Option 2
If you don't want to write CSS and expect the same behaviour of the solution above, just use:
<option hidden disabled selected value> -- select an option -- </option>