What I want it to look like
I have uploaded a photo of exactly what I'm trying to do. Just to clarify, this is an assignment and I do not want it to be done for me. I'm simply asking how I should go about doing this. The white box that has text boxes within it is what I am trying to create. Any help is appreciated,
Just add all the elements of the box inside a div tag and then you can manipulate the divs background-color positioning etc. using CSS.
.white-box {
background-color: white;
color: black;
<!--other positioning attributes-->
}
<div class="white-box">
Content
</div>
That's a form! If its not a form and you are trying to do it via css, you are going to do what frogger said.
Here: http://www.w3schools.com/css/css_form.asp
Related
I'm trying to make an editor that inserts special types of elements. I figured out that if you set contenteditable to false on the elements within it, it wont let you type inside it (which is good), but it doesn't put the cursor before or after either, the cursor just disappears.
Is there a way to stop the user from typing inside the element but retain cursor focus when you click on it, as if it's a normal text symbol?
div div {
width: 30px;
height: 30px;
background: red;
display: inline-block;
}
div {background: #ccc}
<div contenteditable="true">
this one will let you type<div></div>inside the red box
</div>
<div contenteditable="true">
this one wont, <div contenteditable="false"></div> but the cursor does nothing when you click inside it now
</div>
<div contenteditable="true">
cant place cursor after this box <div contenteditable="false"></div>
</div>
You also cant click at the end of the text block if the block is last.
Big problem for usability, really would like to fix this.
Facebook has solved this problem, but I can't figure out if it's with js or css:
edit: I've discovered fb changes the caret-color property to black, but it then seems to jump to the position outside of the span after you type, which must be done with js. Still trying to figure out how.
edit: Tried a lot of things, thought I had it working but it still caused other weird problems. I recommend you just don't attempt this and just use an image element or emoji.
Looks like the readonly attribute is the tool for the job and has acceptable support caniuse.
[contenteditable]:read-only {
cursor: not-allowed;
}
css-tricks article is legit.
I want to do a div as a link, and to tell user that thats is a link I want to do a hover with a different color. But here's a problem: in my div there is picture and text in two separate divs.
div {
:hover {
background-color: light cyan;
}
And when I hover with a mouse on a div the result is:
But I need the all div to become colored. Can you help me?
You can insert your both div tags in a single div and set a class for some css
.exampleclass:hover { background-color: light cyan; }
and use as well as you want.
Otherwise If you want something more from me.
Then please provide html and css both codes to make changes and more better for you. :)
It was really easy, may be some bag of sass, but when i did div:hover{background-color: light cyan;} it really solve the problem.
Thanks you, jonju.
I would like to get an idea from you guys. I have 3 checkboxes that I would like to display one in each line inside a box, kind of like a text area. What Bootstrap tool would allow me to accomplish that?
I tried to create a text area and out my checkboxes in them, but the code is translated as text in the text area. So I could not do that. What's the way of doing it?
You shouldn't restrict yourself to using only Bootstrap elements when making your site. Bootstrap is just a collection of nifty elements; it's fine (and probably necessary) to make your own, too.
If you just want your checkboxes to be in a box with an outline, well, that's a bit too simple for there to be a corresponding Bootstrap element.
In the simplest form, the HTML and CSS for this would look like this JSFiddle.
Html
<div class='checkbox-container'>
<input type='checkbox' id='one'>
<label for='one'>Hello</label>
</div>
Css
.checkbox-container {
margin: 10px 0;
padding: 10px 0;
border: 1px solid #aaa;
}
If you want all of the checkboxes in a single box, then you can do that with just a bit more code. View on JSFiddle.
If for some strange reason you must only use use Bootstrap elements, ananda's answer is pretty good. Using the well element gives you a border, but also an inner shadow and a background color. View the well on JSFiddle
try putting them inside the 'well' element
I'd like to know how to do something like this in CSS:
How is it possible to change the text color halfway through like that on an <input> tag ? I've done a View Source already, but it's hard to make sense of.
Google uses two divs which are absolutely positioned on top of the input box. The first div contains the word stackoverflow, and the text is styled in a light gray. The second dvi contains "stacko" and the text is black.
If you inspect the source, look for divs with class="gsfi".
First off, look into implementing autocompletion. This should give you another element [beneath the one the user types; probably another div] for styling.
its not purely a CSS thing, you need JS too.
Have a look at this autocomplete demo: http://www.pengoworks.com/workshop/jquery/autocomplete.htm
Now you could use CSS for styling text selections in that input to gray the text out.
like this:
::selection {
color: white;
background-color: red;
}
::-moz-selection {
color: white;
background-color: red;
}
I tried to figure it out using Firebug, but no chance. How is the Facebook status input border wrapped round the autosize input? Particularly, I am interested in the small triangle joined into the border. Using Firebug, I managed to find the triangle itself, which is provided in the form of a GIF image:
.uiComposerAttachment, .nub {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zf/r/PfBgtiydy5U.gif) no-repeat center top;
height: 7px;
width: 11px
position: absolute;
left: 2px;
top: 18px;
}
But I couldn't figure out how it is placed above the input and how the border is added, in the form of a background image or defined as a CSS border?
I made a fiddle that mimics the facebook status box...
http://jsfiddle.net/UnsungHero97/mFuD4/5/
I added some functionality to the example, in particular, I found a cool jQuery plugin that allows for textarea auto-resizing.
Facebook actually uses a <textarea> element and the way they take care of the border is simple.
The "What's on your mind?" text is inside the <textarea> element and the border around it is due to several <div> element wrappers (more than the 2 I've shown above). Also, as you pointed out, the little arrow on top of the "What's on your mind?" is a .gif image, but there are ways to do this using only CSS!
Regarding the triangle...
If you're interested in alternative ways to do this using only CSS, I asked a question recently about the little triangle! Here's the question...
How can I create a "tooltip tail" using pure CSS?
... and here are the answers:
answer 1
answer 2
answer 3
answer 4 (this one is REALLY cool!!!)
I hope this helps.
Hristo
Here's how you can do it using only CSS: http://www.yuiblog.com/blog/2010/11/22/css-quick-tip-css-arrows-and-shapes-without-markup/
A similar question has been asked before though...
The border around the textarea is actually around parent div's (.uiTypeahead, .wrap) within the form. Looks like the actual textarea has no border.
As for the triangle it is just a css background inside the li (the items status, photo, video, link, etc are a list). The triangle is this element: <i class="nub"></i>. It is then positioned absolute to sit at the bottom of the list which has the form just below.
Thanks for your useful hints,
I finally managed to solve it in a four-liner:
#type_indicator { /* img#type_indicator is the triangle image tag, followed by the input field in HTML code */
position:absolute;
left:100px;
}
Greetings
Chris