I am trying to do something that seems like it should be very simple to do but hours of research has yet to turn up a single solution that actually works. I'm simply trying to make sure that when the label for a checkbox or radio button is long enough to wrap to a second line, that the second line is appropriately indented. (Ditto for the third thru nth lines if the label is really long). I am looking for a pure CSS-only solution; I do NOT want to involve Javascript if I can possibly avoid it.
This jsfiddle is the closest I've been able to come but it suffers from the fatal flaw that the text begins on the line following the checkbox rather than on the same line. How do I make the label follow the checkbox on the same line and then indent the remaining lines so that they line up with the leftmost letter on the first line (and NOT the checkbox)?
.mytext {
display: grid;
margin-left: 2em;
}
.mytext:first-line {
margin-left: 0;
}
<input type="checkbox" name="Saturdays" id="Saturdays" checked>
<label for="Saturdays" class="mytext">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label><br>
Here's an example of how I want the checkbox to sit with respect to the text:
I need to find some way to make the checkbox appear at the start of the FIRST line of text, regardless of whether the label is one line or several in length. (I feel as if this should be the default behaviour but it obviously isn't.)
Persjin was close.
Put the checkbox in the label. Make the label a block element, give it position:relative so the child elements are positioned with respect to it. Give the label some left padding, then position the checkbox hard left.
label {
position:relative;
padding-left:2.5ch;
display: block;
margin-bottom: 5px;
}
label > [type=checkbox] {
position: absolute;
left: 0;
}
<label>
<input type="checkbox"/>
Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here
</label>
<label>
<input type="checkbox"/>
More Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here
</label>
As you've done a grid version, here is a more streamlined grid option:
.grid-container {
display: grid;
grid-template-columns: 3ch 1fr;
align-items:baseline;
}
.grid-container input {
grid-column-start: 1;
}
.grid-container label {
grid-column-start: 2;
}
<div class="grid-container">
<input type="checkbox" name="Mondays" id="Mondays">
<label for="weekdays">I am available to meet on Mondays.</label>
<input type="checkbox" name="Saturdays" id="Saturdays">
<label for="Saturdays" style="color: black;">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label>
<input type="checkbox" name="Sundays" id="Sundays">
<label for="Sundays">I am available to meet on the first Sunday of each month except if it is on a long weekend.</label>
</div>
HTML
The HTML layout consists of a list (<ol>, <ul>, or <dl>). Each list item (<li> or <dd>) contains an input/label pair (<input type="radio/checkbox"> <label>).
<ol>
<li>
<input id="ID" name="GROUP" type="RADIO/CHECKBOX">
<label for="ID">TEXT CONTENT</label>
</li>
...
</ol>
Attributes #id, [name], and [for] are optional.
Assign identical values for the #id of <input> and [for] of <label> so that they become associated with each other. Such an association allows the pair to behave as if a user "selected"/"checked"/"clicked" etc. the actual <input> when the <label> is clicked and vice-versa.
[name] has two important features
If a [name] value is shared by multiple form controls (<input>, <textarea>, <select>, etc...), they can be collected into a HTML Collection/NodeList.
In order to have a form control value included in a submit event -- that form control needs a [name] attribute.
Attribute [type] is required with the value of either "radio" or "checkbox".
CSS
Indenting a list is simple yet unintuitive. Assign the following to the <ul>, <ol>, or <dl>
ol,
ul {
list-style: none;
padding-left: 4ch;
text-indent: -4ch;
}
A padding-left then an text-indent to counter it's length.
:root {
font: 500 3vw/1.45 Arial
}
ol,
ul {
list-style: none;
padding-left: 4ch;
text-indent: -4ch;
}
li {
margin-bottom: 1rem;
line-height: 1.45rem;
}
input,
label {
font: inherit;
}
[type=checkbox],
[type=radio] {
width: 2ch;
height: 1rem;
line-height: 1rem;
margin-right: 1ch;
transform: translateY(25%)
}
<ol>
<li>
<input id='A1' name='Q1' type='checkbox'>
<label for='A1'>D# +h3 U5Ed p#g3 c0nT3nT,, 70p p#93 p#RticUlAR 7|24n5|4735 iz. != #n33 Wh3|\| n0n. != 91ve qu3ry 8Ut, t0 533 f1|3z, vv1|_|_. |7 4r3 717|3 3n4b|3d, v3r510|\|, j00r p#r+1cUL4r M#Y y#. Pdf 47 7h3y 8#rr13r, 7he 1+ kn0w 5peNDInG, 4r3 4s vv1t |3tz0rz.</label>
</li>
<li>
<input id='B1' name='Q1' type='checkbox'>
<label for='B1'>Лорем ипсум долор сит амет, еа хас мандамус диссентиас. Вел меис урбанитас медиоцритатем ет, про цу мунди цорпора перпетуа. Те цум вери вивендо диссентиунт, пер ин нобис оптион интеллегам. Цу хис пробо доценди рецтеяуе, ад лорем епицури цомплецтитур ест.</label>
</li>
<li>
<input id='C1' name='Q1' type='checkbox'>
<label for='C1'>Dee an eise botze, ké Duerf goung déi. Wat Dach Völkerbond en. Fort d'Lëtzebuerger eng wa, Mecht weisen am sin, dat an stét jeitzt d'Vioule. Um bei wuel Kaffi. Spilt lossen muerges un ass, alle gebotzt d'Stroos et zum, rei do iweral iwerall.</label>
</li>
<li>
<input id='D1' name='Q1' type='checkbox'>
<label for='D1'>やぶら小路の藪柑子。寿限無、寿限無、長久命の長助、水行末 雲来末 風来末、グーリンダイのポンポコピーのポンポコナーの。水行末 雲来末 風来末。シューリンガンのグーリンダイ、シューリンガンのグーリンダイ、食う寝る処に住む処。五劫の擦り切れ、長久命の長助。寿限無、寿限無。食う寝る処に住む処、パイポパイポ パイポのシューリンガン。グーリンダイのポンポコピーのポンポコナーの。</label>
</li>
</ol>
<hr>
<ul>
<li>
<input id='A2' name='Q2' type='radio'>
<label for='A2'>լոռեմ իպսում դոլոռ սիթ ամեթ, եոս ալիքուանդո ելաբոռառեթ իդ, հաբեո վեռեառ վեռթեռեմ սեա նե. նո քուի սալութանդի պռինծիպես սպլենդիդե, եսթ եխ դենիքուե մանդամուս. սեա ադ սալութանդի վոլուպթաթում եֆֆիծիանթուռ, հիս թե աեքուե ծոնգուե քուալիսքուե. եսթ ինիմիծուս եվեռթիթուռ եա.</label>
</li>
<li>
<input id='B2' name='Q2' type='radio'>
<label for='B2'>ლორემ იფსუმ დოლორ სით ამეთ, დუო ფეუგიათ ევერთითურ ეი, ეთ ფერ ველით სიმილიყუე ფჰილოსოფჰია, უთ ვიხ ეხერცი ცომფლეცთითურ. ეი ვიხ დეცორე ლიბერავისსე. ან ჰინც ვიდით რეცუსაბო სედ, ელით აეთერნო დეთრაცთო ეა ვიმ. იისყუე ცორფორა ცონცლუდათურყუე იუს ად, ნე მელ ყუაეყუე სფლენდიდე, ნე ჰას ვოლუფთათუმ ვითუფერათორიბუს. ინ ნობის ირიურე ფერფეცთო სით.</label>
</li>
<li>
<input id='C2' name='Q2' type='radio'>
<label for='C2'>황금시대를 있으며. 아니한 얼마나 사는가 힘차게 물방아 그리하였는가? 이상 인간이 이상이 피에 이상은 우리 보라. 것은 있는 미인을 뭇 황금시대의 사막이다. 이상의 우리는 하는 현저하게 것이다, 주며. 있으며. 두손을 웅대한 귀는 사랑의 노년에게서 청춘 이상의 그들은 운다, 인간은 그들은 뜨고.</label>
</li>
<li>
<input id='D2' name='Q2' type='radio'>
<label for='D2'>Λορεμ ιπσθμ δολορ σιτ αμετ, νε vιδερερ λεγιμθσ θσθ. Ιθvαρετ μανδαμθσ εα μει, εθμ ορατιο σαπιεντεμ νο, πρι ελιτ λορεμ λαβιτθρ εθ. Νθλλαμ τορqθατοσ εοσ ιδ, πριμα jθστο vελ εξ, επιcθρι ελεcτραμ cθ ιθσ. Μεα πριμα νονθμεσ λιβεραvισσε εξ, απεριαμ cομπρεηενσαμ ιδ vιμ. Λαθδεμ δολορεσ ιν νεc, μελ αδηθc qθαερενδθμ σθσcιπιαντθρ εξ</label>
</li>
</ul>
Put the input inside the label element.
<label>
<input type="checkbox"/>
Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here Really long text goes here
</label>
I've managed to find an answer of my own after more research and trial-and-error. If I set up a grid container consisting of a single row with two columns and put the checkbox in the left-hand column and the label in the right-hand column, the checkbox always appears at the top of its column instead of in the middle, regardless of the number of lines in the label. The label is also properly indented so that every line starts at the same place.
Here's my code:
<div class="grid-container">
<div><input type="checkbox" name="Mondays" id="Mondays"></div>
<div><label for="weekdays">I am available to meet on Mondays.</label></div>
</div>
<div class="grid-container">
<div><input type="checkbox" name="Saturdays" id="Saturdays"></div>
<div><label for="Saturdays" style="color: black;">I am available to meet on the first Saturday of each month (with the odd exception since I sometimes go away, especially on long weekends, or because I am sick or just not in the mood to attend a regularly scheduled meeting).</label></div>
</div>
<div class="grid-container">
<div><input type="checkbox" name="Sundays" id="Sundays"></div>
<div><label for="Sundays">I am available to meet on the first Sunday of each month except if it is on a long weekend.</label></div>
</div>
.grid-container {
display: grid;
grid-template-columns: max-content 30em;
grid-column-gap: 1em;
}
.grid-container > div {
text-align: left;
padding-bottom: 1em;
}
And here's the jsfiddle
I have only tried this in the current version of Firefox on Windows so I don't know yet if it will work in every browser on every operating system. I also have no idea how well this works for people with disabilities like visual impairments. I'll try to update this if I learn of any major shortcomings of this approach.
so I upgraded my site into responsive template, all done but stuck here!
so I know this is something very simple as a b c , but for the life of me cannot fig it out :*(
http://www.example.com/cards/holiday-greeting-cards.php
here on top right the search button with magnifying glass icon... how to make it work!
the other search button which says "search holiday cards"(which will be removed once this one starts working) is working fine...
can anyone please please help please
thanks in adv
This isn't perfect solution and it's a more of a hack, but it's really short and does its job.
Append this just after: <input type="text" placeholder="Search">
<input type="submit" style="
width: 30px;
margin-left: -40px;
opacity: 0;
">
If you add a class to your input box (you can also do an input find in search_box)
<div class="search_box pull-right">
<input type="text" class="search_input" placeholder="Search">
</div>
You can use jQuery to get the content (this example only reacts to the enter key)
$('.search_input')
.keypress(function(e) {
if(e.which == 13) { // if you press enter
window.location.assign('/cards/search-results-xmas.php?keywords=' + $('.search_input').val());
}
});
Heads up: I am new to this forum and English is not my main language so sorry if its not completely understandable.
I am making a mobile website for school and it is going pretty far so well...
One problem: i have a thingy(sorry, dont know the name for it) in my css file(#styled_button) and works fine. There is one button i wanted to be positioned differently so i copied the code from '#styled_button' and created a new thingy and added postion:relative; and float:right; but for some reason my button doesnt get styled at all now. (i did change the id on my button).
EDIT: If i change my button id back to button_styled it is styled.
Even without changing the code, so #logout_button is the same as #button_styled, nothing happens.
My button:
<form action='m.member.php' method='POST'>
<input type='submit' name='logout_button' value='Logout' id="button_styled">
</form>
CSS:
#button_styled {
color:white;
background:#666;
font: bold 45px Harabara;
padding: 20px;
text-decoration: none;
vertical-align: middle;
}
EDIT: Typo removed(wasnt copy pasted from my original code), but the problem is not with the form since it works...
As by request of 'brbcode' here is the code of one of the other buttons im using:
<form action='m.loginscreen.php' method='POST'>
<p>Username:</p>
<input type='text' name='username' id="styled">
<p>Password:</p>
<input type='password' name='password' id="styled"><br>
<ul>
<li><input type='submit' name="loginbutton" value='Log In' class="button_styled"></li>
<li><input type='submit' name="registerbutton" value='Register' class="button_styled"></li>
</ul>
</form>
PS: Sorry again for my fluency in english, but for those that didnt fully understand my button works its just the styling...
It sounds like you might be using an ID on several elements in your html(?). ID's should only be used once per page - typically if you have one element that's different than all others. If you're using the button_styled type in several places, you should change it to a class. In your html:
<input class="button_styled" ... >
And in your CSS:
.button_styled {
/* your styling */
}
Im having such a problem, I have a menu that has some hidden sub content. That when the user clicks the nav button some hidden content will appear. That part is fine and all working.
What I need to know is when I have one nav item showing it's hidden content. If the user clicks on the next nav item. I would like the other hidden content to disappear and the new hidden content to appear.
My inspiration comes from this website. http://www.o2.co.uk/ if you click on the nav arrow items. Any help on this would be great. By the way all the Show and Hide effects are all working.
Thanks Anyone who can help..
I'm assuming you're doing this in javascript. Pardon me if I'm being too elementary here.
Your function (if you can post it, that would be helpful) needs to not only change the display attribute of the element you clicked, but also change it to display:none; for any others.
So when you click on the nav item, your javascript changes the display attribute for that list to :block or whatever, and ALSO changes all the other lists to display:none. That's a little brute-force, so you could also just change whatever other ones are currently something other than :none to :none.
You'll need jQuery for this but...
first we tie a onClick function to each element with the class 'link'
we tell that onClick that on a click, HIDE all elements with the class 'hidable' and then show the div with the ID of the rel attribute value in THIS link.
http://api.fatherstorm.com/test/4159899.php
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="js/libs/jquery-1.4.2.js"%3E%3C/script%3E'))</script>
<script>
$(document).ready(function() {
$('.link').each(function(){
$(this).click(function(){
$('.hidable').hide();
$($(this).attr('rel')).show();
});
});
});
</script>
<ul>
<li class='link' rel='#div1'>l1</li>
<li class='link' rel='#div2'>l2</li>
<li class='link' rel='#div3'>l3</li>
<li class='link' rel='#div4'>l4</li>
<li class='link' rel='#div5'>l5</li>
</ul>
for the code block
<div class='hidable' id='div1'>div 1</div>
<div class='hidable' id='div2'>div 2</div>
<div class='hidable' id='div3'>div 3</div>
<div class='hidable' id='div4'>div 4</div>
<div class='hidable' id='div5'>div 5</div>
Hi all having a few problems with my CSS
I am trying to highlight a link on the navigation based on the page the user is on.
I have this style which works as I would like it to do, but when I pass a query-string into pcisHPprofile.aspx the CSS is not working. Does anyone know how i can get this style to work with query-strings?
body form[action="pcisHPprofile.aspx"] #btnuser
{
padding: 18px 4px 5px 4px;
background-image: url(../images/tabbluleft.gif) ;
background-repeat:no-repeat;
color: #fff;
}
<div id="nav" class="nav" >
<ul>
<li id="tab1">
<a id="btnsession" href="pcissessionlist.aspx" > <span >Session</span></a>
</li>
<li id="tab2">
<a id="btnsystem" href="pcissystemsettings.aspx" > <span >System Settings</span></a>
</li>
<li id="tab3">
</li>
<li id="tab4">
<a id="btnuser" href="pcisuserlist.aspx" > <span >User Logins</span></a>
</li>
<li id="tab5">
<a id="btninterpreter" href="pcisinterpreterlist.aspx" > <span >Interpreter Profile</span></a>
</li>
<li id="tab6"><asp:LinkButton ID="btnreports" runat="server" Visible="false" cssid="cssreports" PostBackUrl="#"><span>Reports</span></asp:LinkButton></li>
</ul>
</div>
I assume that the #btnuser ARE some buttonS inside the some forms, where one of the forms have action="pcisHPprofile.aspx"?
If that is correct, then your error is the fact that you have many buttons with the same id attirbute id="btnuser". The ID attibute MUST be uniqe on the page. change the id="btnuser" to class="btnuser" on the buttons and your selector from:
body form[action="pcisHPprofile.aspx"] #btnuser {
}
to
body form[action="pcisHPprofile.aspx"] .btnuser {
}
Then it should work.
In the first form it might work only if the FIRST button with id="btnuser" is actually inside the form with action="pcisHPprofile.aspx". If it is inside any other form, then it will not work.
Best regards,
SWilk
UPDATE:
After OP updated the question, I think that this form of selector should work:
body form[action^="pcisHPprofile.aspx"] #btnuser {
...
}
It would a element with id=btnuser inside a form, which action begins with "pcisHPprofile.aspx". It would not matter if the acutal action attibute contain only "pcisHPprofile.aspx" or "pcisHPprofile.aspx?any-parameters&and=some-values".
Best regards,
SWilk
Using action attribute for styling is a bad practice. Just give your form a name, class or ID like <form class="pcisHPprofile" action="pcisHPprofile.aspx"> and then apply CSS style to that name/class/id.
form.pcisHPprofile {
padding: ...
Found a working solution. a little hacky which I am not 100% keen on but it works.
I changed the query string to look like this
profile.aspx?-&username=
from this
profile.aspx?username=
and I changed the style to
Form[action|="pcisinterpreterprofile.aspx?"] #tab5
{
background-image: url(../images/tabbluright.gif);
background-repeat:no-repeat;
}
The difference is that I have changed the = to an |=.
[att|=val]
Represents an element with the att attribute, its value either being
exactly "val" or beginning with "val"
immediately followed by "-" (U+002D).
This is primarily intended to allow
language subcode matches (e.g., the
hreflang attribute on the a element in
HTML) as described in RFC 3066
([RFC3066]) or its successor. For lang
(or xml:lang) language subcode
matching, please see the :lang
pseudo-class.
by doing this the css selector works on pages with query strings. you just need to make sure the query string has at least ?- at the start. As I said at the last its not great but works.