CSS input text decoration - css

I am trying to achieve something like the website here: http://bit.ly/1f55jUR (where it says Space Min.) but I fail miserably lol..
Here is what I have done until now:
<input type="text" class="textbox" id="box" /><span class="textbox2">TB</span>
.textbox {
border: 1px solid #cccccc;
outline:0;
height:22px;
width: 30px;
}
.textbox2 {
border: 1px solid #cccccc;
font-size: 16px;
background-color: #f0f0f0;
padding: 3px 6px 3px 6px;
}
Live example:
http://jsfiddle.net/55Nb3/
Any help would be highly appreciated.
Thank you!

You need to modify your html like this (span don't have the same properties than div):
HTML
<input type="text" id="textbox" /><label for="textbox" clhttp://jsfiddle.net/55Nb3/#forkass="textbox2">TB</label>
Here is the CSS
#textbox {
border: 1px solid #cccccc;
outline:0;
height:30px;
width: 30px;
border-radius: 4px 0 0 4px;
box-sizing: border-box;
font-size: 16px;
}
label {
display: inline-block;
vertical-align: top;
border: 1px solid #cccccc;
border-left: none;
font-size: 16px;
background-color: #f0f0f0;
line-height: 30px;
padding: 0 6px;
height: 30px;
border-radius: 0 4px 4px 0;
box-sizing: border-box;
}
Here is a link to it

They used Twitter Bootstrap on that website to get that styling: http://getbootstrap.com/components/#input-groups-basic.

I do it by using a mix of jQuery and CSS
jQuery
$('input[type="text"], input[type="email"], input[type="tel"], .post textarea').on('focus blur',function(e){
if(e.type == 'focus' || e.type == 'focusout'){
$(this).addClass('focussed');
} else {
$(this).removeClass('focussed');
}
});
CSS
input{
/* General style here */
}
input.focussed{
/*Different styles for focussed input here */
}

I've done an update on your fiddle: http://jsfiddle.net/55Nb3/5
It's mostly done by:
label {
display: inline-block;
}
And a few style adjustments.
It really doesn't matter if it is a label or something else.

Related

Buttons & links with same styles and content don't line up

I'm trying to style each button and a.btn to look the same across all browsers. Using the following styles the 2 elements don't line up in Chrome and Firefox.
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
I've tried changing the vertical-align to bottom, but while that does move the elements into a more aligned state, the text on the button itself looks mis-aligned still (demo below).
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
height: 27.2px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
vertical-align: bottom;
}
<div id="wrap">
Link
<button>Link</button>
</div>
How can I make both elements display the same way in both Chrome and Firefox?
Erase the height setting from the rule and fine-tune the height only with the paddingparameters:
#wrap {
border: 2px solid red;
}
button::-moz-focus-inner {
padding: 0 !important;
border: 0 none !important;
}
a.btn, button {
display: inline-block;
border: 2px solid transparent;
border-radius: 3px;
color: #fff;
background-color: #777;
padding: 2px 5px;
font-family: sans-serif;
font-size: 16px;
line-height: 16px;
text-decoration: none;
opacity: .85;
cursor: pointer;
box-sizing: border-box;
}
<div id="wrap">
Link
<button>Link</button>
</div>
Chrome and Firefox both use different rendering engines to display html (Chrome uses Blink and Firefox uses Gecko). Different browsers use different rendering engines so I don't think it will look exactly the same across all browsers.

bootstrap tags input width

I am trying to use bootstrap tagsinput in a form contained in a modal
like this
...
<div class="form-group">
<label for="myTagLabel">Tags:</label>
<input class="form-control" id="myTag" type="text" data-role="tagsinput">
</div>
As you can see in the image above I can't see why the input doesn't have the width of the containing form.
UPDATE
this http://www.bootply.com/f43d1A0YxK reproduces the issue
The reason you are seeing this behaviour is because bootstrap-tagsinput actually hides the original input element, and in its place adds a div. You are seeing a div element styled to look like a Bootstrap input element. So any CSS to affect the original input will not produce any changes.
What you want to change is the .bootstrap-tagsinput class:
.bootstrap-tagsinput {
width: 100% !important;
}
Here's a demo: http://www.bootply.com/1iATJfFM69
Add display: block; to the .bootstrap-tagsinput class in your CSS. As noted by Mohamad this class is not present in your own HTML, but when you inspect element/view source you can see that the input is wrapped in a <div class="bootstrap-tagsinput">.
.bootstrap-tagsinput{
display: block;
}
This will overwrite the display: inline-block; that is being inherited.
Bootply Demo
Cristian almost guessed it
somewhere in js:
$('.bootstrap-tagsinput > input').css('width', '');
and in css:
.bootstrap-tagsinput input {
width: 10em;
}
I see the tagsinput plugin you are using comes with its own css file.
bootstrap-tagsinput.css
These css rules are automatically being added to your input when you add the data-role="tagsinput".
.bootstrap-tagsinput {
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
display: inline-block;
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
.bootstrap-tagsinput input {
border: none;
box-shadow: none;
outline: none;
background-color: transparent;
padding: 0;
margin: 0;
width: auto !important;
max-width: inherit; //Try change this to 100% !important;
display: block; // Add this in
}
You need to update these so they don't over rule native bootstrap rule.
The reason behind this problem is, the bootstrap-tagsinput class is using display: inline-block;
the solution is, simply change the display: inline-block; to display: block;
Before change
.bootstrap-tagsinput {
display: inline-block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
After change
.bootstrap-tagsinput {
display: block;
background-color: #fff;
border: 1px solid #ccc;
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
padding: 4px 6px;
margin-bottom: 10px;
color: #555;
vertical-align: middle;
border-radius: 4px;
max-width: 100%;
line-height: 22px;
cursor: text;
}
The reason you are seeing this behaviour is because the style actually override the width attribute:
style="width: 3em ! important;"
Remove the style:
$('.bootstrap-tagsinput > input').prop( "style", null );
This should work properly.
Additionally, set the desired width with CSS:
.bootstrap-tagsinput input { width:100%!important; }

CSS - Make SPAN extend to end of its container / fill empty space?

I have the following HTML layout for a website (powered by Network Solutions nsCommerceSpace) I am designing a theme for:
<div id="ctl00_breadcrumb" class="breadcrumb">
<span id="ctl00_breadcrumbContent">
<span>[Name of Webstore]</span>
<span> > </span>
<span>Page</span>
<span> > </span>
<span>Here is a very long title of a product that is causing me much frustration because it jumps out of place.</span>
</span>
</div>
The span tags with <span> > </span> in them are automatically generated to separate each item.
Here is a Fiddle of my problem: http://jsfiddle.net/5fvmJ/
Is there a way I can make the last SPAN tag fill the empty space, and just end when it hits the right side? I would just use overflow: hidden; to hide the extra text.
Any ideas? I know having all SPAN's makes this tough, but it's built-in functionality of the site that I cannot change.
I think I found a pure CSS solution. You only missed two things:
You have to use only display: inline-block in the <span> tags without float: left, because floating is actually contradictory with inline-block elements.
You have to use white-space: nowrap in the parent <div>.
This way you don't need to specify a width for anything. :)
JSFiddle demo
http://jsfiddle.net/yz9TK/
CSS
(I cleaned it up a little bit)
#import url(https://fonts.googleapis.com/css?family=Open+Sans);
body {
background: #212121;
color: #FFF;
}
#ctl00_breadcrumb {
height: 45px;
width: 960px;
background-color: #707070;
line-height: 45px;
font-size: 16px;
font-family: Helvetica, sans-serif;
border-radius: 10px;
border: 1px solid #585858;
text-shadow: 0px -1px 0px rgba(0,0,0,0.5);
-webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, .75);
white-space: nowrap;
overflow: hidden;
}
#ctl00_breadcrumbContent span {
display: inline-block;
padding: 0px 10px;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span a {
padding: 0;
margin: 0;
color: #FFF;
text-decoration: none;
line-height: 45px;
font-size: 18px;
font-family: Helvetica, sans-serif;
}
#ctl00_breadcrumbContent span:nth-child(even) {
width: 0;
height: 0;
padding: 0;
margin: -22px -4px -16px -4px;
overflow: hidden;
}
#ctl00_breadcrumbContent span:nth-child(1) {
border-radius: 10px 0px 0px 10px;
background-color: #404040;
}
#ctl00_breadcrumbContent span:nth-child(2) {
border-top: 22px solid #505050;
border-bottom: 23px solid #505050;
border-left: 15px solid #404040;
}
#ctl00_breadcrumbContent span:nth-child(3) {
background-color: #505050;
}
#ctl00_breadcrumbContent span:nth-child(4) {
border-top: 22px solid #606060;
border-bottom: 23px solid #606060;
border-left: 15px solid #505050;
}
#ctl00_breadcrumbContent span:nth-child(5) {
background-color: #606060;
}
#ctl00_breadcrumbContent span:nth-child(6) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
border-left: 15px solid #606060;
}
#ctl00_breadcrumbContent span:nth-child(7) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(1) {
background-color: #707070;
}
#ctl00_breadcrumbContent span:nth-last-child(2) {
border-top: 22px solid #707070;
border-bottom: 23px solid #707070;
}
This span class did the trick for me...
span.empty_fill {
display:block;
overflow:hidden;
width:100%;
height:100%;
}
Essentially used like this...
<div class='banner'><a href='/'><span class='empty_fill' /></a></div>
Try styling the span with display:block EX:
<span style="display:block"> Here is a... </span>
Two different kind of answers, both not great:
http://jsfiddle.net/5fvmJ/14/: Set a max-width for the last span, to make sure that the background doesn't jump. You should then make sure that the text doesn't fall out.
Without any width changing, get the text dimensions, and only display the substring with ... appended, which stays inside the bar: http://jsfiddle.net/5fvmJ/19/. You should do that dynamically. ( Calculate text width with JavaScript)
You don't need to specify the width.
Simply add 'display:block; float:none;' to the css class.
Optionally add 'overflow:hidden' if you don't like the exceding text starting a new line.

Form input elements not centering

I've looked at a number of different answers here, and they all seem to boil down to text-align: center in the parent div's style. I've tried that, and it's working for labels, but not actual input elements.
JSFiddle
Here's the basic code:
html
<div id="content">
<div id="login_form">
<h2>Log in to DOT Voting</h2>
<form>
<label for="username">Username</label>
<input type="text" name="username" value="" />
<label for="password">Password</label>
<input type="password" name="password" value="" />
<input type="submit" name="submit" value="Log In" />
</div>
</div>
css
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 0 1em 0;
width: 90%;
border: 1px solid #818181;
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: 1em;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
The login_form div is centered on the page, the form labels are centered in the div, and the submit button is centered in the div. But the text input boxes are not centered. What can I do to force them to center? (I don't care if the content of the input boxes is centered; I just want the boxes themselves centered in the div.)
Add
margin: auto;
to your input[type=text], input[type=password] class.
Also be sure to remove the text-align: center; attribute because that causes the text in the input to be centered.
JSFiddle
Amend the margin declaration for your input elements to use auto for margin-left and margin-right:
#login_form {
width:90%;
background-color: #bdd2ff;
border: 1px solid white;
margin: 50px auto 0;
padding: 1em;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
text-align: center;
}
input[type=text], input[type=password] {
text-align:center;
display: block;
margin: 0 auto 1em auto;
width: 90%; /*280px;*/
border: 1px solid #818181;
/* -moz-border-radius: 1px;
-webkit-border-radius: 1px; */
padding: 5px;
}
input[type=submit] , form a {
border: none;
margin-right: auto;
margin-left: auto;
padding: 6px;
text-decoration: none;
font-size: 12px;
-moz-border-radius: 4px;
-webkit-border-radius: 4px;
background: #cfdeff;
color: black;
box-shadow: 0 1px 0 white;
-moz-box-shadow: 0 1px 0 white;
-webkit-box-shadow: 0 1px 0 white;
}
input[type=submit]:hover, form a:hover {
background: #007cc2;
cursor: pointer;
}
Updated JS Fiddle.
text-align does not work on block elements. Remove the display:block on input[type=text], input[type=password] or change it to display:inline-block. Note that inline-block does not work for < IE7.
Or since you have a width declared on the input, you can remove the text-align:center and use margin: 0 auto 1em auto;
It's centering based on the 90% input[type=text], input[type=password] css value. You can define that with a fixed width, or for liquid layouts, set it to 100% width and adjust it's margin.

css unwanted overlapping

Here is my html:
<div class="pagination">Page
«
1
2
<strong>3</strong>
4 ...
104
»
</div>
My css:
div.pagination { width: 90%; margin: 15px auto; float:right; text-align: right; }
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination strong { border: 1px solid #0667B9; background-color:#FFFFFF; padding: 3px 6px; color:#0667B9; margin: 1px; }
div.pagination a:hover { border: 1px solid #0667B9; background-color:#0667B9; padding: 3px 6px; color:#B4D6F2; margin: 1px; }
And what I am getting in result:
The problem you see, things are getting overlapped, what I would like to avoid.
Thanks in advance for any help. Cheers.
It's because you used float I think.
Can you get away with using display: inline instead?
EDIT:
BTW I would have used list-items to display the paginator.
add a line-height:30px; to div.pagination
I copied your code and it looks fine but try this
div.pagination a { border: 1px solid #0667B9; background-color:#B4D6F2; padding: 3px 6px; color:#0667B9; margin: 5px 10px; }
The padding pushes the border outside. So you might need some margin to push the links downward.
Add
display:block; width:10px; float:left;
to
div.pagination a

Resources