I want to have an input textbox with following requirements.
With fixed size.
Only bottom dashed border with number of dashes equal to the size.
I tried:
<div>
input text: <input size="5" maxlength="5"/>
</div>
here is the fiddle that I tried.
is it possible to have number of dashes equalto the size attribute of the textbox?
If yes, How can I do it?
First of all it's not possible. Every browser renders dashed borders differently.
You could use a workaround. In the following example I have added a ul which simulates the number of characters which can be used
input{
border:none;
border: 0px dashed;
letter-spacing: 2px;
}
input:focus{
outline:0
}
div{
border: 2px solid #CCC;
padding: 50px;
}
ul {
position: relative;
top: -35px;
right: -30px;
height: 1px;
}
li {
display: inline;
margin: 0 2px;
list-style-type: none;
font-size: 8px;
}
<div>
input text: <input size="5" maxlength="5"/>
<ul><li>_</li><li>_</li><li>_</li><li>_</li><li>_</li></ul>
</div>
Related
I need to underline text in input that will display value of expression (I'm making a calculator).
If I use text-decoration: underline the line is too thick and too close to the text.
I need to make line like this. Line should underline only text, not a whole input.
I use fixed width: 200px for input (max value can be five-digit of six-digit). If I don't set width input takes 100% of available place. Thus we can't use border-bottom because line have width like input, but text have line about 70% of input width and we'll get something like this .
If it possible, we shouldn't use JavaScript, only CSS.
JSFiddle
.calc__total-cost {
font-size: 56px;
font-weight: 700;
width: 200px;
height: 60px;
background: transparent;
color: #efae02;
text-align: right;
text-decoration: underline;
}
<div class="calc__total">
<input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
</div>
You can use something like this:
.calc__total-cost{
border: none;
}
.calc__total-cost:active, .calc__total-cost:focus{
border: none;
outline: none;
}
.calc__total{
position: relative;
}
.calc__total:after{
position: absolute;
width: 35px;
height: 1px;
background: #333;
content: '';
left:0;
bottom: 0;
}
<div class="calc__total">
<input type="text" class="calc__total-cost" id="calc__total-cost-value" value="5000">
</div>
You could play with height, borders and outline: you could partially overlap the underline created with text-decoration using a white bottom border. Then you could restore the border using the outline property, e.g.
input {
width: 300px;
height: 4.1rem;
text-align: right;
padding: 0 10px;
text-decoration: underline;
font: 5rem Arial;
color: gold;
border: 0;
border-top: 10px #fff solid;
border-bottom: 10px #fff solid;
outline: 1px #d8d8d8 solid;
}
<input type="text" value="5000"/>
As the final result only the number is underlined with a light line (play with bottom border to adjust the tickness)
I have the following code:
<td>
<div>
<span class ="name">Can be long, can be short</span>
<button>Test</button>
</div>
</td>
td{
white-space: no-wrap;
width:175px;
position: relative
}
button{
position:absolute;
right: 15px;
bottom: 5px;
}
What I get is
I want to show name in one line (even if it is outside the cell), but button should be always in cell (on the same line).
If name is short then it should be right after the name, if not then stick to the right of cell.
I used absolute positioning, but in this case button always sticks to the right of the cell. Not what I need for short names.
So, picture for long name is what I need, but for short name I want yellow button to show near name, not stick to the right side.
Working jsfiddle: https://jsfiddle.net/8kchkucv/
Is it possible to do this with CSS?
Andrew what you are asking is not possible with having only one css for both the buttons, either you can have something like this jsfiddle
https://jsfiddle.net/rohts76/8kchkucv/1
.but
{
cursor: pointer;
padding: 2px 5px;
margin: 5px 0px 0px 5px;
border-radius: 5px;
font-family: 'Pacifico', cursive;
font-size: 10px;
color: #FFF;
text-decoration: none;
background-color: #F2CF66;
border-bottom: 1px solid #D1B358;
text-shadow: 0px -2px #D1B358;
position:absolute;
//right: 15px;
bottom: 5px;
}
.cell{
white-space: nowrap;
width:175px;
position:relative;
}
.cell div{
margin: 0;
padding: .35em;
float: left;
width: 100%;
height: 100%;
}
tr{
background-color: #8db4e3;
background-size: 100% 100%;
}
This code will give you correct thing..
i'm trying to customize a text input with css, i want the text inside it to have a margin of 10px to the left so i use:
#text{
text-indent: 10px;
border: 1px solid #333;
outline: none;
padding: 0;
margin: 0;
width: 168px;
height: 20px;
border-radius: 4px;
}
It works in all browsers except for IE10 which seems to ignore the text-indent property, how can i fix it?
<input type="text" id="text" />
you can use padding-left, it works on all browsers:
#text {
padding: 0 0 0 10px;
border: 1px solid #333;
outline: none;
margin: 0;
width: 158px; //decrease width with the same padding vale so that the width would stay the same
height: 20px;
border-radius: 4px;
}
If you want to use a special rule for IE, adding display: inline-block and a line-height, along with the text-indent rule, will fix this as well. This is an old trick for both IE7-9 as well.
input.special {
text-indent: 150px;
display:inline-block;
line-height: 18px;
}
Does the trick.
This is good if you are using liquid or responsive widths and you don't want to have to adjust your input's width on account of the padding.
Here's an image showing what I'm trying to pull off.
So, a line to the left and right of any given text (typically would be some sort of of heading tag), that extends a certain distance on each side of the text (in this case, 65px).
I need something that is fluid in relation to the text itself...the overall width can't be fixed.
This solution is the one that's worked best for me in the past, you can se the example here. The code uses ::before and ::after pseudo classes to create the lines and then applies display:table to the text so the box adapts to it's content (I've used h2 for the example) This type of design is normally centered so I've added the margin: 1em auto;
Doing it this way, you don't need to add any extra html. Hope it helps.
h2{
display:table;
margin: 1em auto;
}
h2:before, h2:after{
content:"";
display: block;
border-top: 1px solid #ccc;
width: 65px;
margin-top:.5em;
}
h2:before{
float: left;
margin-right:3px;
}
h2:after{
float:right;
margin-left:3px;
}
You can do it in different ways.
One way would be setting border around the text, after keeping text inside header tags or div with font settings.
Refer the suggestions in the following link:
Add centered text to the middle of a <hr/>-like line
Try this: Demo
<html>
<head>
<style type="text/css">
.striked-text {
position: relative;
}
.striked-text .text {
z-index: 10;
position: relative;
background-color: white;
padding: 0 5px;
}
.striked-text .line {
left: -65px;
padding: 0 65px;
border-top: 1px solid gray;
top: 0.7em;
display: block;
position: absolute;
width: 100%;
z-index: 1;
}
</style>
</head>
<body>
<div style="text-align:center;">
<span class="striked-text"><span class="text">FAQ</span><span class="line"></span></span>
</div>
</body>
</html>
For headings you need to define container's width
Your html code
<fieldset class="title">
<legend>Some text</legend>
</fieldset>
your css code
fieldset.title {
border-top: 1px solid #aaa;
border-bottom: none;
border-left: none;
border-right: none;
display: block;
text-align: center;
}
fieldset {
width: 50%;
}
fieldset.title legend {
padding: 5px 10px;
}
jsFiddle
I am using Fx 9 and my following code breaks in it while it works in all other browsers including IE9.
EDIT
Please note that I just want to know about this particular code breaking not interested in how to actually get work done because I am learning CSS not doing work for any client.
HTML
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
CSS
#sform {
display:inline-block;
border: solid 1px #d2d2d2;
padding: 10px 10px;
border-radius: 2em;
box-shadow: 0 1px 0px rgba(0,0,0,.1);
background: #f1f1f1;
letter-spacing: -4px;
}
:not(#sform){
letter-spacing: -4px;
}
.sfield {
padding: 6px 35px 6px 8px;
border: solid 1px #bcbbbb;
width: 202px;
border-radius: 2em;
box-shadow: inset 0 1px 2px rgba(0,0,0,.2);
}
.sbutton {
color: #fff;
background: #5f5f5f;
margin-left: -52px;
border: solid 1px #494949;
height: 27px;
width: 27px;
border-radius: 2em;
}
http://jsfiddle.net/UfK6K/8/
The behavior of your testcase will depend on the precise font size the user has set and the font that gets used. It will also depend on how the UA decides to handle negative letter spacing; the spec allows it to be capped or ignored altogether. From http://www.w3.org/TR/CSS21/text.html#spacing-props :
This value indicates inter-character space in addition to the default space between characters. Values may be negative, but there may be implementation-specific limits.
Add position: absolute; to .sbutton.
Is that the desired outcome?
Why use letter-spacing there anyway? I don't see the logic behind this decision.
I think you may have to rework that code, try with something like this, it's cleaner and it should work in all browsers, IE8+ just fine. Adjust to your needs:
html
<form id="sform" action="index.htm">
<input class="sfield" type="text" value="Search..." />
<input class="sbutton" type="button" value="Go" />
</form>
css
#sform, .sfield, .sbutton {
border-radius: 100px;
padding: 10px;
}
#sform {
position: relative;
display: inline-block;
background: #999;
border-radius: 100px;
}
.sfield {
border: 1px solid #999;
width: 300px;
}
.sbutton {
position: absolute;
right: 10px;
border: 0;
background: black;
color: white;
}
explanation:
Letter spacing increases or decreases the space between characters in a text and it seems you're using it to add padding.
Then, an absolute position element is positioned relative to the first parent element that has a position other than static.
Try removing all your letter-spacing and you'll see that the changes in the layout are minimal.
Take a look at my example and by logic you'll figure it out why it works.
example:
http://jsfiddle.net/elclanrs/7KGkJ/1/