I'm creating a custom dropdown using the method from this site: http://bavotasan.com/2011/style-select-box-using-only-css/
HTML
<div class="styled-select">
<select>
<option>Here is the first option</option>
<option>The second option</option>
</select>
</div>
CSS
.styled-select select {
background: transparent;
width: 268px;
padding: 5px;
font-size: 16px;
line-height: 1;
border: 0;
border-radius: 0;
height: 34px;
-webkit-appearance: none;
}
.styled-select {
width: 240px;
height: 34px;
overflow: hidden;
background: url(new_arrow.png) no-repeat right #ddd;
border: 1px solid #ccc;
}
There is also a working example in the link. So it works perfectly. However, when the text of my options is really long, it is overlapping with the dropdown.
Here is a link to JSFiddle: http://jsfiddle.net/APNB6/ to illustrate the problem
Is there a workaround to that?
Thanks,
Tee
Maybe you could try adding something like this to you .styled-select select
.styled-select select{
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
width: 238px;
padding-right:30px;
}
This will hide the overlapping text, I would also make select a bit smaller, or give it right padding so the text doesn't go over the down arrow.
http://jsfiddle.net/Q687L/2/
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<style>
* {
outline:none;
}
select::-ms-expand {
appearance: none;
display:none;
background:#fff;
}
select {
-webkit-appearance: none;
appearance: none;
border:none;
}
/*select box apparance*/
#-moz-document url-prefix() {
.styled-select select {
width:110% !important;
}
}
.styled-select select {
width:100%;
background:transparent;
height:30px;
padding:0 30px 0 0;
}
.styled-select {
border:1px solid #ccc inset;
width:200px;
overflow:hidden;
background: url(down_arrow_select.jpg) no-repeat right #ddd;
}
</style>
<body>
<div class="styled-select">
<select>
<option>Here is the first option Heren inder </option>
<option>The second option</option>
</select>
</div>
</body>
</html>
Related
I do want to style a checkbox like this
White color border, White color tick mark, and dark blue (#283550) for the background.
I tried this
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
.watchlist {
outline: 2px solid white;
background-color: #283550;
}
.wrapper {
padding: 3rem;
background-color: #283550;
}
</style>
</head>
<body>
<div class="wrapper">
<input type="checkbox" class="watchlist">
</div>
</body>
</html>
adding the white border was successful. But still, I can see a grey color border inside and also unable to fill the background with dark blue color.
How do I achieve this to work in any modern web browser?
Overriding the appearance property of checkbox a will result in a completely customized appearance.
Also use the :before & :after pseudo to style the checkbox tick element on :checked property.
Note: Use vendor prefix for wider browser support. (Firefox, Safari, etc.)
body {
background: #283550;
}
/* custom checkbox */
.custom-checkbox {
height: 23px;
width: 23px;
margin: 0;
padding: 0;
opacity: 1;
appearance: none;
border: 2px solid #FFF;
border-radius: 3px;
background: #283550;
position: relative;
margin-right: 10px;
}
.custom-checkbox:checked {
border: 2px solid #FFF;
}
.custom-checkbox:checked:before,
.custom-checkbox:checked:after {
content: "";
position: absolute;
height: 2px;
background: #fff;
}
.custom-checkbox:checked:before {
width: 6px;
top: 11px;
left: 3px;
transform: rotate(44deg);
}
.custom-checkbox:checked:after {
width: 12px;
top: 8px;
left: 5px;
transform: rotate(-55deg);
}
.custom-checkbox:focus {
outline: none;
}
<input class="custom-checkbox" type="checkbox" name="check" checked>
You can achieve this by using Bootstrap 5 Checkbox, and update your HTML code with the following code
<div class="wrapper">
<div class="form-check">
<input class="form-check-input watchlist" type="checkbox" value="" id="flexCheckChecked" checked>
<label class="form-check-label" for="flexCheckChecked">
Checked checkbox
</label>
</div>
</div>
and your CSS with following code
.watchlist {
outline: 2px solid white;
background-color: white;
}
.wrapper {
padding: 3rem;
background-color: #283550;
color: white;
}
.form-check-input:checked{
background-color: #283550;
border-color: #283550;
}
Enjoy!
The checkbox you're using is the default Firefox design. It'll look different on other browsers so I'd suggest you stick to Bootstrap buttons.
To change the color of the bootstrap button, read this answer.
I trying to create input, that has border-bottom and small (in height) borders in sides like that:
But this code didn't work:
input:before, input:after {
display: block;
height: 5px;
width: 1px;
background: #f00;
}
The problem is that the ::after pseudo element puts the pseudo element inside the element that you select that, so an input can't have ::before or ::after.
Secondly the pseudo element normally requires content:" ";
Here is a working example
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
.input input {
font-size:20px;
}
.input {
border:none;
display:inline-block;
border-bottom:solid red 1px;
}
.input:before, .input:after {
content:" ";
display: inline-block;
vertical-align:bottom;
height: 5px;
width: 1px;
background: #f00;
}
</style>
</head>
<body>
<div class="input">
<input value="Text" />
</div>
</body>
</html>
so here is my example :
span {
display:inline-block;
border-bottom:red solid 1px;
position:relative;
}
span:before, span:after {
content:'';
position:absolute;
bottom:-1px ;
height:10px;
border-left:solid red 1px;
}
<span><input/></span>
see it here http://codepen.io/gc-nomade/pen/bfDwy
you van also set this by only border css like:
border-bottom: red thin solid;
width: 100px;
border-left: thin solid red;
border-right: red thin solid;
height: 20px;
text-align: center;
I am trying to make a very simple XHTML/CSS horizontal toolbar with several "tabs", 1 of them being a very simple search form.
I have the following XHTML code:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" type="text/css" href="main.css"/>
<title>Form test</title>
</head>
<body>
<div id="toolbar">
<div id="toolbar-content-wrapper">
<div id="toolbar-content">
<div class="toolbar-tab"><div>Language: EN</div></div>
<div class="toolbar-tab"><div id="search-box"><form action="search.php" method="get"><fieldset><input name="q" type="text"/><input value="Search!" type="submit"/></fieldset></form></div></div>
<div class="toolbar-tab"><div>hello-how-are-you?</div></div>
</div>
</div>
</div>
</body>
</html>
and the following CSS:
* {
margin: 0;
padding: 0;
}
#toolbar {
background-color: lightgray;
width: 100%;
/* A trick to make div expand vertically to embrace floats. */
overflow: hidden;
}
#toolbar-content-wrapper {
display: table;
float: right;
}
#toolbar-content {
display: table-row;
}
#toolbar-content > div.toolbar-tab {
background-color: black;
display: table-cell;
padding: 0 2em;
vertical-align: bottom;
}
#toolbar-content > div.toolbar-tab > div {
background-color: yellow;
color: black;
border: thin solid black;
}
#search-box form, #search-box fieldset, #search-box input {
border-style: none;
}
#search-box form {
display: table;
background-color: red;
}
#search-box fieldset {
display: table-row;
background-color: orange;
}
#search-box input {
display: table-cell;
}
#search-box input[type=text] {
background-color: white;
}
#search-box input[type=submit] {
background-color: blue;
color: white;
}
This renders fine in Epiphany 2.30.6, but very bad in Iceweasel 3.5.16. See the screenshots here: http://people.eisenbits.com/~stf/load/2012-08-23-form-test/ . In Iceweasel 3.5.16 the red background of <form> and the orange background of <fieldset> is visible! Why?
All you have to do is add line-height: 0; for those elements as well.
Works great in webkit but small sliver left in FireFox due to the height of the "Search" button.
The div #leftcol won't go below the navigation panel. Dreamweaver shows it as if #leftcol and #navigation are the same div. I am an absolute newbie so any help is greatly appreciated. Here is the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
#container {
font-family: Arial, Helvetica, sans-serif;
font-size: 1.2em;
width: 800px;
margin: 0 auto;
border: 1px solid #FC3;
}
#header h1 {
float: right;
padding-right: 150px;
padding-top: 50px;
}
#navigation {
border-left: 1px solid #FC3;
border-right: 1px solid #FC3;
border-bottom: 1px solid #FC3;
}
#navigation ul {
margin: 0;
}
#navigation ul li {
display:inline;
}
#navigation ul li a {
display: block;
padding: 5px;
text-decoration: none;
float: left;
}
#navigation ul li a:hover {
background-color: #cadb2b;
}
#navigation ul li a:visited {
background-color: #cadb2b;
}
#leftcol {
width: 200px;
background: #cadb2b;
border: 1px solid black;
clear: both;
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<img src="header" />
<h1>Some Title!</h1>
</div>
<div id="navigation">
<ul>
<li>Home</li>
<li>About</li>
<li>Gallery</li>
<li>Contacts</li>
</ul>
</div>
<div id="leftcol">Content for id "leftcol" Goes Here</div>
</div>
</body>
</html>
Also, I didn't know how to position the <h1> next to the picture so I floated it to the right and then positioned it with padding. Is this the correct method for positioning the title next to the header? Thanks in advance. PS. As a new user, I had to remove two of the links in my navigation and my header picture, so don't mind if it looks weird.
Is this what you have in mind. I'm not entirely sure what it is you intend for, so if I'm wrong, see my comment under your question.
http://jsfiddle.net/9hqCK/1/
If you don't want leftcol to take up the entire width of the page, add the following property to #leftcol
width:250px;
Change the width to what suits you.
Why is there a one pixel gap created between the top and the bottom of the p tag in the following code in IE6 and IE7 but not in Firefox or IE8?
I have been pulling my hair trying to create the search texbox on powerset website
and interesting enough they don't have the bug in IE6 or IE7. What am I doing wrong?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
#sbox
{
overflow: hidden;
}
#sbox p
{
/*border:1px solid #dae7fa; */
float:left;
display: block;
border: 1px solid red;
width: 208px;
padding: 0;
}
input#q
{
font-size: 11px;
padding: 3px;
border: 1px solid blue;
width: 200px;
color: #999999;
}
</style>
</head>
<body>
<div id="sbox">
<p>
<input id="q" type="text" value="Search..." />
</p>
</div>
</body>
</html>
Add float:left; to input#q. That will get collapse p and get rid of the gap.