I'm looking to achieve an effect where, when typing in a form, the textarea grows as you type, and adds an underline for each line of text.
See the effect in GIF form here:
Can this be easily accomplished just by using CSS? How might I go about this?
You can do that by using a <div contenteditable="true"> instead of textarea:
HTML:
<div contenteditable="true" class="validate[required,length[6,300]]
feedback-input" id="comment"
placeholder="Start writing your message here..."></div>
CSS:
.feedback-input>div{
padding: 2px 0;
line-height: 28px;
border-top: 1px solid #ccc;
}
.feedback-input>div:first-child{
margin-top: 5px;
}
.feedback-input>div:last-child{
border-bottom: 1px solid #ccc;
}
Demo
Adjust the CSS as you want.
You can implement the constant underlines by making a background image that has some blank space and an underline. Then set the image as background of your textarea and have it repeat. Lastly, set the line-height in CSS to be equal to the height of your background. The lines will now repeat along with the height of the text.
For the textarea resizing, you can use TrungDQ's answer or one of many libraries available through Google.
Related
I have a form with a lot of color inputs. I am using boostrap and the default look for a color input is horrible so I have been adding my own CSS on top of it to clean it up. I have gotten rid of the big white border but now I would like to have it display as a circle instead of a square. I would like it to be a flat circle with no border and maybe even with a slight shadow for a material design-esque look.
This is one of my color inputs:
<div class="col-xs-1 menu-title-color-div color-input-div">
<input type="color" id="menu-title-color-input"
class="form-control menu-data color-input menu-title-color-input"
name="MenuTitleColor">
</div>
and the CSS I am using to gain the look. (When I figure out how to display them as a circle I am going to move this CSS to a more specific css selector)
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
}
Here is what it looks like so far. There also still seems to be a thin, gray border around the inputs but I can't figure out how to get rid of that either.
github
I hope I am understanding you correctly - you want those three buttons to be circles instead of squares? Or do you want the whole div to be a square?
Either way, this is one option of doing it by manipulating the radius and setting a width and height:
.form-control {
color: #ffffff;
background-color: inherit;
padding: 0;
border: none;
box-shadow: none;
width: 100%;
height:100%;
border-radius: 50%;
}
It's just a standard HTML 'hr' tag but the line is displaying with an odd extra pixel. My only CSS is:
hr {margin:0%;line-height: 100%;}
Apparently I don't have enough rep to include images of the issue, so you'll have to go off my description.
Use the height property instead of the line-height property and that should fix your issue. Here's some additional information on styling hr tags. Cross-Browser hr Styling
It's in the comments now, but here's the fix that worked for him.
hr { border:none; border-top:1px #CCCCCC solid; height: 1px; }
The HR uses a shadow on it in most browsers. You should override the style using css or something like:
<hr noshade size="1" />
Update:
noshade is deprecated... See http://www.electrictoolbox.com/style-html-hr-tag-css/
Css Solution:
hr {
border: none;
background-color: #000;
color: #000;
height: 1px;
}
Cross-browser solution with CSS:
hr { height: 1px; background-color: #000; border: 0 none; }
How I change the thickness of my <hr> tag
jsFiddle:
http://jsfiddle.net/6nXaN/
An hr tag is just rendered as a 1px tall empty element with a border style of inset (change the height of the hr a few pixels to see what I mean). The extra pixel comes on the left due the way the inset border is rendered. If you add:
hr { border-left: none; }
...then you can maintain the inset look of the default hr without the extra pixel. Making the border-style solid, or making it a black background colour may make your hr too dark. I prefer the subtlety of the above approach.
In the site I am currently building I am having trouble getting my border colors right for <input> and <button> elements. I would like to have the top, left, and right borders to be the same color and then have the bottom border a different color. I can get the styling to work for any other element to work except for those two, and this issue only exist in IE9. Any help or explanation would be greatly appreciated.
Example of my problem: http://jsfiddle.net/NyG3x/24/
Try setting to borders separately.
border: 1px solid #000;
border-bottom: 5px solid #CE181E
This appears a bug in IE9. If you set the bottom border to 1px, the red border appears to show correctly. However, if you set the value to anything more than 1px, it seems to revert the border-color to the value of the other border-color.
UPDATE
A simple solution would be to remove the styling from the button, wrap the inner text of the button inside a div and style the div. This works in IE9 as shown here.
I know this is more markup, but it will surely solve the issue.
Apply the 1px border as usual to the three sides, but wrap your form elements in a tag, say a div tag and apply a 5px bottom border on the div tag.
HTML would look something like this:
<form id="button-set-two">
<div class="btn-wrapper">
<input class="btn-style" type="submit" value="Btn1" />
</div>
</form>
And CSS would look like this:
#button-set-two .btn-style{
border: 1px solid #000;
border-bottom:none;
color: #000;
float: left;
font-size: 1.6em;
margin-right: 5px;
padding: 2px 10px;
background: none;
}
#button-set-two .btn-wrapper{
border-bottom:5px solid #CE181E;
}
Actually, I want to implement a text box as shown in the figure:
I want that the user should be able to enter the number in the required space. Note that it would be transparent so that the background is visible. A solution involving html5 canvas would also be good.
So, is it possible to do this? If so, how?
What have you tried so far? You pretty much answered your own question, make the input have a transparent background.
input {
border: 0;
outline: 0;
background: transparent;
border-bottom: 2px solid black;
width: 20px;
}
jsFiddle
Set <input> border be only bottom side. Here is the demo, just like your picture shows.
What is the best way to combine a border with some text like so:
----------- sometext ------------
| |
| form |
| |
---------------------------------
As it's for a form, you should use a fieldset element.
See: http://jsfiddle.net/thirtydot/AVGsr/
METHOD:
For use with anything even when not using the forms fieldset, you can use my method in this JSFiddle (It does NOT use Javascript, JSFiddle can be used for pure HTML & CSS), I will explain what it does in here:
What the fiddle demonstrates is having 3 divs as the top single border area, made up of 2 divs either side with a 1px border in the middle, and one on each side, and the middle div having text only, aligned to the center and padded as needed.
There is then a div placed underneath that which is the main content, but it only has 3 borders (left, right and bottom. The top has been made by the side div's).
The CSS and HTML is here, and JSFiddle link underneath.
FEATURES:
This method should fit all your criteria
Border text is in the place of part of the top border
Border text is central, can be placed anywhere along by modifying the CSS
Easy to change dimensions of the bordered area
CSS:
.wrapper-box { float:left; width:500px; height:150px; }
.side-border { float:left; height:24px; width:199px; border-top: solid black 1px; margin-top:25px; }
.side-border.l { float:left; border-left: solid black 1px; }
.side-border.r { float:left; border-right: solid black 1px; }
.border-text { float:left; height:35px; margin-top:15px; width:100px; text-align:center; }
.box-content { float:left; width:498px; height: 100px; border-left: solid black 1px; border-right: solid black 1px; border-bottom: solid black 1px; }
HTML:
<div class="wrapper-box">
<div class="side-border l"></div>
<div class="border-text">Border Text</div>
<div class="side-border r"></div>
<div class="box-content"></div>
</div>
EXTRA INFO:
To modify the CSS for longer text, just reduce the width of the border-text, and increase the width of the side-border.
JSFiddle Example Here
Hope this helps you out, I'll be keeping this for future reference myself :).
Define a division with border and put a heading in that division.
To make the heading overlap the top border, define a negative top-margin appropriately.
To make the line around the heading disappear define the background color of the heading same as the original background.
Here goes the code:
<div class="container" style="border: 1px solid black;">
<h4 style="margin-top:-1%; background: white;">Heading</h4>
</div>
Very similar to this discussion: How to center the <legend> element - what to use instead of align:center attribute?
As was said there, using the tag is a pain if you want consistent results across browsers. To achieve this effect, I'd use a <h> tag or <div> instead for the legend.
Here's a example: http://jsfiddle.net/CddE7/
Tested in Firefox, Chrome and IE 7,8,9 for PC. The vertical placement of the <h3> varies slightly by IE version but only by a little (and probably could be refined for more uniformity).
Since I assume people will complain about using an <h3> instead of a <legend>, yes, it's not as semantically correct. But it works.
Supporting the previous answer, the fieldset element came in html 4 and it helps to group like items within a form and creates a set or a field of like items or you can wrap all the items contained in your form..
e.g.
<form><fieldset><legend>Name of your field/Some Text(your case)</legend>
Then you can add your labels and inputs in p tags or table, but the p tag is more preferable. At the end close your fieldset and form tags.. and add this type of code to your css
fieldset{
border: thin dashed #000;
}
You can add border to your form elements in this way..