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 */
}
Related
I need CSS code to restrict submit button if fields are empty.Daily we are receiving 3-5 blank inquiries through our WordPress landing page submit button.
Where to put these CSS codes if any.
Thanks
You really should do this with a script, because doing something like this by CSS is very sensitive to any future changes to your form structure.
It can be done with only CSS, using the :placeholder-shown selector.
For this you'll need to add a placeholder to all text inputs.
/* As long as one of the selectors is matched, the button won't show. */
form input:placeholder-shown ~ button,
form textarea:placeholder-shown ~ button {
display: none;
}
<form>
first name: <input type="text" name="firstname" placeholder="Enter first name"><br>
Last name: <input type="text" name="lastname" placeholder="Enter last name"><br>
Text area<br>
<textarea name="textarea" placeholder="Enter some text..."></textarea>
<br>
<button type="submit">Submit</button>
</form>
This will work, but for any change in the form you'll need to make sure it doesn't break.
I personally won't use this :)
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());
}
});
I'm trying to make a form that has a list of default options, and which can also expand to show a couple of exta options. I do this with the following CSS code:
.myForm .moreOpts {display:none;}
.myForm #more:checked +*+ .moreOpts {display:block;}
with the following HTML:
<form action="#" class="myForm">
<ul>
<li>
<input type="checkbox" id="pref-1" name="pref-1" value="1">
<label for="pref-1">Foo</label>
</li>
<li>
<input type="checkbox" id="pref-2" name="pref-2" value="2">
<label for="pref-2">Bar</label>
</li>
<li>
<input type="checkbox" id="more" name="more" value="true">
<label for="more">More options</label>
<ul class="moreOpts">
<li>
<input type="checkbox" id="pref-3" name="pref-3" value="3">
<label for="pref-3">Baz</label>
</li>
<li>
<input type="checkbox" id="pref-4" name="pref-4" value="3">
<label for="pref-4">Qux</label>
</li>
</ul>
</li>
</ul>
</form>
Demo
This code works perfectly in every browser, except for Android Browser and Dolphin. I've found an article that recommends adding this "bugfix", but that only fixes my problem in Dolphin.
Is there any way to make this work for the default Android Browser too?
You can achieve this with the help of the details element. Android supports it since version 4. However, you will have to deal with IE and Firefox, but fortunatly these browser support the CSS3 pseudo states, including :checked.
Two merge these two, just use the checkbox hack in browsers that don't support details. Here's the process explained in code: http://jsfiddle.net/hF6JP/1/
EDIT: this is the final solution, putting label inside the summary resolves the problem of having a forced checkbox to toggle the options: http://jsfiddle.net/mYdsT/
I wouldn't trust :checked for all browsers. I'd capture the click event of #more and just add a class to the parent. It's easy with jQuery. This option will work in Android and IE8.
$("#more").on("click", toggleCheckboxes);
var toggleCheckboxes = function(evt){
var $this = $(this);
$this.parents("li").toggleClass("show-more-options");
evt.preventDefault()
}
.myForm .moreOpts {
display:none;
}
.myForm .show-more-options .moreOpts {
display:block;
}
:checked isn't supported in IE8, which is sadly still a big deal
https://developer.mozilla.org/en-US/docs/Web/CSS/:checked
http://quirksmode.org/css/selectors/mobile.html#t60
:checked apparently doesn't work in any version of Android. I'm not sure why so many webpages report that it should work (apparently from 2.1 up), but this is false.
The nice thing about QuirksMode is that every feature is actually tested in a real browser before they post it on the web.
JavaScript appears to be your best solution. I would even recommend javascript because if a user checks the "more" box, then selects some of the extra options, and then unchecks the "more" box... the extra selections will still be "checked" and will get submitted if a user hits a "submit" button. You will have to un-check those boxes every time the "more" box is un-checked. The only way to do this is with javascript.
UPDATE: QuirksMode has written a flawed test for the :checked selector:
:checked {
display: inline-block;
width: 3em;
}
You will notice that on Android the width never changes... but this is due to the fact that Android does not apply a width to checkboxes and radios (while desktop browsers do).
The following does work, even in my Android 2.3:
:checked {
display: inline-block;
margin: 3em;
}
So, as stated in other comments, the problem is with the combination of the checked selector and the adjacent sibling selector:
:checked + .test { /* does not work on android :( */ }
:checked ~ .test { /* does not work on android :( */ }
Got a listview that looks like this:
http://jquerymobile.com/demos/1.3.0/docs/examples/swipe/swipe-list.html#demo-page
It contains two clickable areas.
I've search around for an example where they have checkbox in the listview, good example was this one: jsfiddle.net/yakirmanor/d8KNF/
But I dont whant to have a big "label for" that takes all the area. I whant that my text to be a link.
But it seems to be hard, i've been mixing around for a solution but it ends up with that the checkbox takes a own line.
I've tried to make a <div> and have float="left" but it doesn't really look as I want.
In my first example link I have 2 areas, the one to the right could be a checkbox. But it seems like it need to be a link to get that area.
Is there any good solution? Or do I need to make it a own line?
All this will be for a inbox view. And my checkbox on left or right side will be a selection for what message to be deleted.
Sorry for late answear!
I have the checkbox on another line now. But actually I want it next to my message. As they usally are on inboxes for devices when you selecting items for delete.
<div data-role="content">
<ul data-role="listview" data-inset="false" data-icon="false" data-split-icon="delete" data-filter="true">
<li data-role="list-divider">Details</li>
#foreach (var message in Model.MessageList)
{
<li data-role="fieldcontain"><a href="/Message/Detail?messageRef=#message.MessageRef">
<h3>#message.FromPersonName</h3>
<h2>#message.MessageHeader</h2>
<p>
My information about</p>
</a>
<label style="border-top-width: 0px; margin-top: 0px; border-bottom-width: 0px; margin-bottom: 0px;
border-left-width: 0px; border-right-width: 0px;" data-corners="false">
<fieldset data-role="controlgroup">
<input id="#("cbx" + message.MessageRef)" class="markedForDelete" name="CheckboxToDelete" type="checkbox"
value=#message.MessageRef />
</fieldset>
</label>
</li>
}
</ul>
</div>
And as I showed in my second exampel link in my first message. There is a solution. But they have all the message text as a "label for". I want to seperate it, the message would be a link as it is in my example.
This is my code:
Enter your question here:
<form method="post" action="">
Title:
<input type="text" name="title">
<br>Further Explanation:<br>
<textarea name="content" rows="5"></textarea><br>
<input type="submit" name="input" value="Ask" />
<?php
if(isset($_POST['delete'])) {
include "connection.php";
if (mysql_query("TRUNCATE TABLE Questions"))
{
echo "Pitanje je uspesno obrisano";
} else {
echo "Nastala je greška pri brisanju pitanja<br>" . mysql_error();
}
}
?>
</form>
<form action="
<?php
$_SERVER['PHP_SELF'];
?>
" method="post">
<input type="submit" name="delete" value="delete all questions">
</form>
Now, this is what should my form normally look like:
But this is what happens when I put in or out of the div tag inside my dynamic page file:
http://tinypic.com/images/404.gif
What am I doing wrong? what is going on? :(
I'm not a CSS pro, but what I'd recommend is firing this up in Firefox after you download the add-on Firebug. Firebug will let you get right in there and mess with the CSS and HTML while it is running in the browser, so you can adjust things on the fly, turn on and off css elements, and isolate exactly what is causing the problem. Just find the div in the Firebug window and it will list every css element currently attached to it. From there, you should be able to move through the code and see where that weird CSS is coming from.
You probably have some CSS rules that change the appearance of input and textarea elements, probably something like:
input, textarea {
border: none;
}
That’s why your input and textarea elements do not have a border. And the centered align might be inherited from a parent element.