Changing css styling help needed

ChrisjChrisj · September 16, 2016, 5:30pm

I’d like to try changing some styling, but I’m not sure how.

I changed this:

div.select-main {
	background-color: #;
	border: 1px solid #;
	box-shadow: 0 0 2px #;
	border-radius: 0px;
	/*font-size: 1.7em;
	height: 70px;
	position: relative;
	width: 315px;
	
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

to this:

.subCat {
	background-color: #;
	border: 1px solid #;
	box-shadow: 0 0 2px #;
	border-radius: 0px;
	/*font-size: 1.7em;
	height: 70px;
	position: relative;
	width: 315px;
	
	-webkit-user-select: none; /* webkit (safari, chrome) browsers */
    -moz-user-select: none; /* mozilla browsers */
    -khtml-user-select: none; /* webkit (konqueror) browsers */
    -ms-user-select: none; /* IE10+ */
}

and it looks like it works fine. But I don’t know how to change these others to work with the subCat class:

div.select-main.z-index {
	z-index: 10;
}

div.select-main.disabled {
	cursor: default;
	filter: alpha(opacity=50);
	opacity: 0.5;
	zoom: 1;
}

div.select-main.disabled div.select-set {
	cursor: default;
}

div.select-main.disabled div.select-arrow {
	cursor: default;
}

div.select-set {
	background-color: #;
	border-radius: 0px;
	color: #850a00;
	cursor: pointer;
	height: 40px;
	line-height: 40px;
	/*overflow: hidden;*/
	position: relative;
	padding: 15px 0px 0px 90px;
	text-overflow: ellipsis;
	white-space: nowrap;
	width: 90px;
	z-index: 5;
	margin: 0px 0px 0px 0px;
	border: 1px solid: #;
}

div.select-arrow {
	border-top: 12px solid #ff6339;
	border-left: 12px solid transparent;
	border-right: 12px solid transparent;
	cursor: pointer;
	position: absolute;
	top: 29px;
	right: 255px;
	width: 0px;
	height: 0px;
	z-index: 7;
}

div.select-arrow.reverse {
	border-top: 7px solid transparent;
	border-bottom: 7px solid #850a00;
	top: 10px;
}

/* drop-down-list */
div.select-block {
    background-color: #a6a6a6;
    border-left: 1px solid #;
    border-right: 1px solid #;
    border-bottom: 1px solid #;
    border-radius: 0px;
    box-shadow: 0 0 2px #;
    left: -1px;
    line-height: 20px;
    font-size: 20px;
    position: absolute;
    top: 32px;
    width: 250px;
    margin: 0px 0px 0px 15px;
}

ul.select-list {
	cursor: pointer;
	margin: 15px 0 7px;
}

/* Scroll view */

ul.select-list::-webkit-scrollbar {
    width: 12px;
}

ul.select-list::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
    border-radius: 10px;
}

ul.select-list::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
}

ul.select-list {
	scrollbar-face-color: #;
    scrollbar-shadow-color: #C7CACA;
    scrollbar-highlight-color: #CED1D1;
    scrollbar-3dlight-color: #CED1D1;
    scrollbar-darkshadow-color: #C7CACA;
    scrollbar-track-color: #CED1D1;
    scrollbar-arrow-color: #FFFFFF;
}

/* End scroll view */

li.select-items {
	color: #333333;
	padding: 7px 15px;
}

li.select-items:hover,
li.select-items.active {
	background-color: #bb9797;
	color: #FFFFFF;
}

I’m just trying to find a solution to an issue, that I’m not getting help on elsewhere, so I’m giving this a shot. Any guidance you can provide will be appreciated.

ronpat · September 16, 2016, 5:43pm

I may be missing something, but where is the HTML that the CSS is supposed to style?

Maybe you can post a “working page” , or a CodePen , or a link to your site with screen shots showing what you want it to look like.

SamA74 · September 16, 2016, 5:46pm

I think it’s just a case of substituting the string div.select-main with .subCat leaving the remaining part of the selector.
Though @ronpat is correct, we need to see the html too, to put it in context.

ChrisjChrisj · September 16, 2016, 5:47pm

Thanks for your reply.

I have posted screen shots for help in the javascript section, without any response.

So, if you can simply guide me with “how to change these others to work with the subCat class”,
I may be able to resolve the rest. Much thanks

ChrisjChrisj · September 16, 2016, 5:48pm

Thanks for the reply about “I think it’s just a case of substituting the string div.select-main with .subCat leaving the remaining part”.

How about the ones that don’t have div.select-main. Any ideas on changing them to work with subCat?

ronpat · September 16, 2016, 5:52pm

Is there a topic in the JavaScript category about this same issue?

ChrisjChrisj · September 16, 2016, 5:55pm

I’m trying a different approach here, to a topic in Javascript section, that has no replies.
So, this question here, has not been asked before.

PaulOB · September 16, 2016, 6:00pm

We don’t know what those classes refer to so we can’t help. You haven’t provided html so we can’t tell what those classes target and how then might be related to select-main or .subcat.

All we know is that you want .select-main to be .subcat and that is just a simple matter of substitution in the rules shown

ChrisjChrisj · September 16, 2016, 6:08pm

Thanks for your reply.

I’m trying to change those styling to refer to:

class="subCat"

in the script below:

<script>
$(document).ready(function(){
$("select.ui-select").selectWidget({
change: function(changes) {

var channel_id = changes;
var Parent = $('select[name=sub_category]').parent();

Parent.html('<select class="subCat" name="sub_category"><option value="All">Sub Category</option></select>');

$.ajax({
type: "POST",
url: "/ajax.php",
data: "channel_id="+channel_id,
dataType: 'json',
statusCode: {
200: function(data) {
for(i = 0; i < data.length; i ++) {
$("select[name='sub_category']").append("<option value='"+data[i]["sub_channel_id"]+"'>"+data[i]["sub_channel_name"]+"</option>");
}
}
}
});
return changes;
},
effect: "slide",
keyControl: true,
speed: 200,
scrollHeight: 120
});
});
</script>

PaulOB · September 16, 2016, 6:38pm

Again we can only see that you have asked to change .select-main to .subcat so the only rules that can be safely changed are these:

div.select-main.z-index {
	z-index: 10;
}

div.select-main.disabled {
	cursor: default;
	filter: alpha(opacity=50);
	opacity: 0.5;
	zoom: 1;
}

div.select-main.disabled div.select-set {
	cursor: default;
}

div.select-main.disabled div.select-arrow {
	cursor: default;
}

e.g.

.subcat.z-index {
	z-index: 10;
}

.subcat.disabled {
	cursor: default;
	filter: alpha(opacity=50);
	opacity: 0.5;
	zoom: 1;
}

.subcat.disabled div.select-set {
	cursor: default;
}

.subcat.disabled div.select-arrow {
	cursor: default;
}

The last two rules are now of course nonsense because a div cannot be inside a select element!!

We don’t know where the other classes in your list refer and how they tie into the structure of subcat and indeed if subcat is a replacement for select-main or is inside select-main?

Of course it also begs the question how can div.select-main now be a select element instead of a div?

ChrisjChrisj · September 16, 2016, 7:07pm

Thank you.

How about div.select-block?

And ul.select-list. How can they be connected with subCat?

PaulOB · September 16, 2016, 7:27pm

From your script it shows that .subCat is a select element so there are no descendant elements as such to target so those rules can’t affect anything else.

What we need is the generated html that you are working with and then we might be able to see where this is all heading:).

ChrisjChrisj · September 16, 2016, 7:42pm

Thanks again for your reply.

<form method="get" action="../search.php" name="myForm" />
    <select size="1" name="channel" class="dropdown_box" />
    <option value="All">All</option>
    <option value="4">Channel-2</option>
    <option value="6">Channel-4</option>
    </select>
    <select size="1" name="sub_category" class="dropdown_box" />
    <option value="All">Sub Category</option>
    </select>
    <input type="text" autocomplete="off" id="keyword" name="keyword" value="SEARCH WORDS" onfocus="if (this.value=='SEARCH WORDS') {this.value=''; this.style.color='#696969';}" onclick="clickclear(this, 'Search [var.site_name]')" onblur="clickrecall(this,'Search [var.site_name]')" value="" />
    <input type="submit" value="SUBMIT"/>
    </form>

felgall · September 16, 2016, 9:11pm

presumably because screen shots by themselves are meaningless without you also including the code - particularly the HTML.

PaulOB · September 17, 2016, 8:29am

Thanks for the html but I don’t see any elements that your css refers to in that block you just posted?

I would have assumed to see elements called .subCat, .select-block etc but there are none.

I’m wondering if you are using a select replacement script and replacing the form control with styled html instead?

If this is true we would need to see the generated source of the html which you can get from your dev tools.

Assuming that your select is replaced with a div called .subcat then the css changes we have given you already should work with that.

There are too many unanswered questions to give a good answer to this:)

system · December 17, 2016, 3:29pm

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.

Topic		Replies	Views
Styling <select> tags in HTML5 HTML & CSS	6	7201	October 8, 2014
Apply style to "select input" for safari HTML & CSS	2	395	January 20, 2010
SELECT OPTION styling works somewhat on Windows but 0 on macOS HTML & CSS	2	690	September 12, 2024
Stupid CSS Question About Safari HTML & CSS	3	381	October 8, 2014
List box border styles HTML & CSS	6	6788	October 8, 2014

Changing css styling help needed

Related topics